根据复选框更改下拉值

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/