嘗試根據另一個選擇框的值更改一個選擇框

Question

我有一個小的javascript程序，它在一個選擇框中查看值（十年的id_Decade）並調整另外兩個選擇（該十年的年份范圍）中的值范圍。 頁面的html由Django 2.0應用程序創建。 我也在運行jQuery。

其中一個年份選擇框（id_Date_year）正常工作 - 從id_Decade讀取十年，創建年份范圍，正確填充id_Date_year選擇框，如果id_date_year中有預選年份，則為保存。

另一個選擇框id_Approximate Date_year的問題不會保留預先選擇的年份值。 十年的年份正確加載，但未選擇預選年份。

在此圖片中，它顯示加載后的頁面。 最初的十年是1890年，預選年份是1894年。請注意日期選擇框如何選擇1984年，但是“近似日期”框選擇了“選擇一年”。 兩個選擇框都有正確的年份范圍 - 1890-1899。

如果我將十年更改為1950年，則日期和近似日期選擇是正確的，因為所選年份是1894年，並且不是在20世紀50年代的十年。 兩個選擇框的年份范圍相同 - 1950年至1959年。

兩個選擇框都使用相同的代碼。 我知道在一個元素的id名稱中有一個空格是verboten，但是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_Approximate 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>