Question

我有一个小的javascript程序，它查看一个选择框中的值（十年的id_Decade）并调整其他两个选择中的值的范围（该十年的年范围）。该页面的html由Django 2.0应用程序创建。我也在运行jQuery。

年份范围选择框之一（id_Date_year）正常工作-从id_Decade读取十年，创建年份范围，正确填充id_Date_year选择框，并且如果id_date_year中有预选的年份，即被保留。

另一个选择框id_近似日期_年的问题未保留预选的年份值。十年的年份已正确加载，但是未再次选择预选的年份。

在此图中，显示了加载后的页面。最初的十年是1890，预选择的年份是1894。请注意，“日期”选择框如何选择了1984年，但是“近似日期”框却选择了“选择年份”。两个选择框都具有正确的年份范围-1890-1899。

如果我将十年更改为1950，则日期和近似日期选择正确，因为选定的年份是1894，而不是1950年代的十年。两个选择框的年份范围相同-1950年至1959年。

两个选择框都使用相同的代码。我知道元素的ID名称中有一个空格，但是Django正在创建该ID值，但我还没有找到更改它的方法。

代码如下：

  (function($) {
      $(document).ready(function(){
        console.log("Made it into update years from decade");
        // Get the selected year if there is a Date field
        var Date_years = $('#id_Date_year');
        var selectedDateYear = Date_years.find(':selected').val();
        console.log("selectedDateYear="+selectedDateYear);
        // Get the decade selected
        var decade1 = $('#id_Decade option:selected').text();
        console.log("decade1="+decade1);
        // get the years for that decade
        newOptions = years_from_decade(decade1);
        // update the date select box
        update_options(newOptions, Date_years, selectedDateYear);

        // Get the selected year if there is an Approximate Date field
        var Approximate_years = $("[id='id_Approximate Date_year']");
        var selectedApproximateYear = Approximate_years.find(':selected').val();
        console.log("selectedApproximateYear="+selectedApproximateYear);
        // update the date select box
        update_options(newOptions, Approximate_years, selectedApproximateYear);

        $('#id_Decade').change(function(){
          // chang the years if the decade changes
          var decade2 = $('#id_Decade option:selected').text();
          console.log("decade2="+decade2);
          newOptions = years_from_decade(decade2);
          console.log("we have newOptions=");
          console.log(newOptions);
          update_options(newOptions, Date_years, selectedDateYear);
          update_options(newOptions, Approximate_years, selectedApproximateYear);
        })

        // calculate the years for the decade
        function years_from_decade(decade) {
          console.log("we have a decade="+decade);
          var newOptions = {};
          base_year = parseInt(decade, 10);
          for (i = 0; i < 10; i++) {
            year = base_year + i;
            key = year.toString();
            newOptions[key] = key;
          }
          return newOptions;
        }

        // replace the options with new ones
        function update_options(newOptions, target, selectedYear) {
          console.log("update_options selectedYear="+selectedYear);
          target.find('option:gt(0)').remove(); // remove all options, but not the first
          $.each(newOptions, function(key, value) {
            target.append($("<option></option>").attr("value", value).text(key));
            console.log("value="+value+" selectedYear="+selectedYear);
            if (value == selectedYear) {
              console.log("got a match! value="+value);
              target.val(value).change();
            }
          })
        }
      });
    })(jQuery);

两个选择框的控制台消息都相同。两种情况下都可以使用预选年份的匹配，但是id_rox.date_year选择框不会获得预选年份，而id_Date_year则可以。

此行为与id值中的空格有关吗？从您的代码中可以看出，我不是经验丰富的js编码器。我确信有很多更好的方法可以做我想做的事！

谢谢！

标记

Answer 1

您正确的说，您不能在jQuery选择器中使用空格。如果这是导致您的问题的原因，则可以通过多种方式解决它：

使用纯JS并用$（）包裹起来，将其转换为jQuery对象 $(document.getElementById('id_Approximate Date_year'))
使用属性选择器$("[id='content Module']")
转义空格$('id_Approximate\\ Date_year')

演示示例：

$('#div one')                          .html('$(\'#div one\') Successful')
$(document.getElementById('div two'))  .html('$(document.getElementById(\'div two\')) Successful')
$("[id='div three']")                  .html('$("[id=\'div three\']") Successful')
$('#div\\ four')                       .html('$(\'#div\\\\ four\') Successful')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div one">Unchanged</div>
<div id="div two">Unchanged</div>
<div id="div three">Unchanged</div>
<div id="div four">Unchanged</div>

尝试根据另一个选择框的值更改一个选择框

1 个答案: