根據複選框更改下拉值

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/