JQuery - Auswahloptionen werden nicht an Änderungsereignis angehängt

Question

Ich habe Probleme beim Hinzufügen von Optionen zu einem select Element. Ich habe zwei Select-Elemente und ich möchte die zweiten Elemente Optionen basierend auf dem ersten Wert generieren.

• Zuerst habe ich hinzufügen, Elemente in der ersten Box beim Laden jedes Elements
• der Benutzer eine Option in der ersten Box wählt und auf der Grundlage, dass das zweite Auswahlfeld Auswahloptionen wird von

wählen Der folgende Code funktioniert nicht für mich, da nach dem Auswählen einer Option in der ersten Auswahlbox keine Optionen zur zweiten hinzugefügt werden.

Ich bin mit Bootstrap-Select jQuery-Plugin

Hat Anregungen jemand? :/ Danke.

JQuery:

$(window).bind("load", function() { 
    var connection = {wifi: 'Wifi', ethernet: 'Ethernet'}; 

    for (var c in connection) { 
     $("#connection").append('<option value="' + connection[c] + '">' + connection[c] + '</option>'); 
    } 
}); 

$("#connection").on('change', function() { 
    var wifi_devices = {smartphone: 'Smartphone', tablet: 'Tablet', notebook: 'Notebook', desktop: 'Desktop'}; 
    var ethernet_devices = {notebook: 'Notebook', desktop: 'Desktop'}; 

    conn_type = $('#connection').find(":selected").text(); 

    if (conn_type == 'Ethernet') { 
     for (var e in ethernet_devices) { 
      $('#device').append('<option value="' + ethernet_devices[e] + '">' + ethernet_devices[e] + '</option>') 
     } 
    } else { 
     for (var w in wifi_devices) { 
      $('#device').append('<option value="' + wifi_devices[w] + '">' + wifi_devices[w] + '</option>') 
     } 
    } 
}); 

HTML:

<div class="jumbotron margin-top-25 fade in" id="testinput"> 
    <div class="row"> 
     <!--connection type input--> 
     <div class="col-lg-3"> 
      <div class="input-group"> 
       <select class="form-control selectpicker" id="connection" data-size="5" data-live-search="true" title="Connection"></select> 
      </div> 
     </div> 
     <!--device type input--> 
     <div class="col-lg-3"> 
      <div class="input-group"> 
       <select class="form-control selectpicker" id="device" data-size="5" data-live-search="true" title="Device"></select> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Wenn Sie nicht möchten, dass die zweiten Auswahlmöglichkeiten zur Verfügung zu Last haben, die Click-Ereignishandler hinzufügen, so dass, wenn Sie Ihre gewählte Option wählen Bei der ersten Auswahl werden die zweiten Auswahloptionen hinzugefügt. Entfernen Sie auch die vorherigen Optionen bei der zweiten Auswahl bei jedem Ereignis.

$(window).bind("load", function() { 
 
    var connection = {wifi: 'Wifi', ethernet: 'Ethernet'}; 
 

 
    for (var c in connection) { 
 
     $("#connection").append('<option value="' + connection[c] + '">' + connection[c] + '</option>'); 
 
    } 
 
}); 
 

 
$("#connection").on('change click', function() { 
 
    var wifi_devices = {smartphone: 'Smartphone', tablet: 'Tablet', notebook: 'Notebook', desktop: 'Desktop'}; 
 
    var ethernet_devices = {notebook: 'Notebook', desktop: 'Desktop'}; 
 

 
    conn_type = $('#connection').find(":selected").text(); 
 
    // Removing previous options 
 
    $('#device').find('option').remove(); 
 
    if (conn_type == 'Ethernet') { 
 
     for (var e in ethernet_devices) { 
 
      $('#device').append('<option value="' + ethernet_devices[e] + '">' + ethernet_devices[e] + '</option>') 
 
     } 
 
    } else { 
 
     for (var w in wifi_devices) { 
 
      $('#device').append('<option value="' + wifi_devices[w] + '">' + wifi_devices[w] + '</option>') 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="jumbotron margin-top-25 fade in" id="testinput"> 
 
    <div class="row"> 
 
     <!--connection type input--> 
 
     <div class="col-lg-3"> 
 
      <div class="input-group"> 
 
       <select class="form-control selectpicker" id="connection" data-size="5" data-live-search="true" title="Connection"></select> 
 
      </div> 
 
     </div> 
 
     <!--device type input--> 
 
     <div class="col-lg-3"> 
 
      <div class="input-group"> 
 
       <select class="form-control selectpicker" id="device" data-size="5" data-live-search="true" title="Device"></select> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>