Zsolt Mester Zsolt Mester - 1 month ago 13
HTML Question

JQuery - Select options are not appended on change event

I'm having trouble adding select options to a

select
element. I have two select elements and I want to generate the second elements options based on the first's value.


  • First I add elements to the first box upon loading every element

  • The user chooses an option in the first box and based on that the second select box gets select options to choose from



The below code is not working for me, because after selecting an option in the first select box, no options are added to the 2nd.

I'm using Bootstrap-Select jQuery plugin

Does anyone have any suggestions? :/
Thank you.

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>

Dez Dez
Answer

If you don't want to have the second select options available on load, add the click event handler so if you choose your selected option from first select, second select options get added. Also remove previous options on second select on every event.

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