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 here。

如果你点击一个选项并完成它，或按顺序点击不同的方框（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/

根据复选框更改下拉列表值

1 个答案: