JQuery - Select options are not appended on change event

Question

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>

You're not binding the change event in a DOM ready handler. The drop down element might not be present at runtime. — Terry, Nov 06 '16 at 22:47

score 1 · Accepted Answer · answered Nov 06 '16 at 22:53

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>

I ran your edited code and it ran here flawlessly, but locally I still had the problem. turns out there was an issue with refreshing the options. adding $('#device').selectpicker('refresh'); made the options visible on the UI. http://stackoverflow.com/questions/23259617/how-to-add-option-values-on-silviomoretos-bootstrap-select — Zsolt Mester, Nov 06 '16 at 23:16

JQuery - Select options are not appended on change event

1 Answers1