根據復選框更改下拉列表值

Question

我有點卡住，不太了解為什么。 我正在一個預先存在的框內工作，該框要求我們創建一個變通方法-為了簡化說明，基本上我需要做的是使用所選復選框的值填充下拉列表。

我已經了解了使用以下代碼的基礎：

<h4>Select a Date:</h4>
<input type="checkbox" id="session_1" value="1" name="this">Session 1
<br>      
<input type="checkbox" id="session_2" value="2" name="this">Session 2
<br>
<input type="checkbox" id="session_3" value="3" name="this">Session 3
<br>
<input type="checkbox" id="session_4" value="4" name="this">Session 4
<br/>
<input type="checkbox" id="session_5" value="5" name="this">Session 5
<br>
<input type="checkbox" id="session_6" value="6" name="this">Session 6
<br>
<br/><br/>
<select id="hidden_select">
    <option>-</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

和jQuery：

$(':checkbox').on('change',function(){
 var th = $(this), name = th.prop('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);   
  }
});

$('input#session_1').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(1)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(1)').attr('selected', false);
      }
  });

$('input#session_2').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(2)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(2)').attr('selected', false);
      }
  });

  $('input#session_3').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(3)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(3)').attr('selected', false);
      }
  });

  $('input#session_4').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(4)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(4)').attr('selected', false);
      }
  });

  $('input#session_5').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(5)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(5)').attr('selected', false);
      }
  });

  $('input#session_6').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(6)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(6)').attr('selected', false);
      }
  });

您可以在這里看到jsfiddle 。

如果您要單擊一個選項並對其進行操作，或者依次單擊不同的框（1-6），則此方法有效，但是如果您改變主意然后返回（選擇1，然后選擇4，然后返回到一個），則此方法有效下拉列表不再更新。

關於它為什么停止識別變化的任何想法？ 有辦法克服嗎？

Answer 1

即使您單擊其他復選框，您select選項仍保持選中狀態。 將選項之一設置為selected ，請確保從其他選項中刪除了selected屬性：

  $('input#session_3').on('change', function () {
      if ($(this).is(':checked')) {
          //PUT THIS LINE ON EACH OF YOUR HANDLERS
          $('#hidden_select>option').attr('selected', false);
          $('#hidden_select>option:eq(3)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(3)').attr('selected', false);
      }
  });

更新的小提琴： https : //jsfiddle.net/qnd75wmf/5/