Ändern Dropdown-Wert basierend auf Kontrollkästchen

Question

Ich bin ein bisschen fest und nicht ganz verstehen, warum. Ich arbeite in einer bereits vorhandenen Box, die uns die Erstellung eines Workarounds erfordert. Um die Erklärung zu vereinfachen, muss ich im Grunde eine Dropdown-Liste mit dem Wert eines ausgewählten Kontrollkästchens füllen.

Ich habe die Grundlagen, dass bekommen mit dem folgenden Code zu arbeiten:

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

und die 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); 
     } 
    }); 

Sie die jsfiddle here sehen können.

Dies funktioniert, wenn Sie auf eine Option klicken und damit fertig sind, oder klicken Sie auf verschiedene Kästchen in der Reihenfolge (1-6), aber wenn Sie Ihre Meinung ändern und zurückgehen (Wählen Sie 1, dann 4) zurück zu einem) Das Dropdown-Menü wird nicht mehr aktualisiert.

Irgendwelche Gedanken, warum es aufhört, die Änderung zu erkennen? Gibt es eine Möglichkeit, darüber hinweg zu kommen?

Answer 1

Ihre Optionen in Ihrem select bleiben ausgewählt, auch wenn Sie auf ein anderes Kontrollkästchen klicken. Wenn Sie eine der Optionen zu selected eingestellt, stellen Sie sicher, dass Sie das selected Attribut aus anderen Optionen entfernen:

$('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); 
     } 
    }); 

Aktualisiert Geige: https://jsfiddle.net/qnd75wmf/5/