CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Zsolt Mester
Zsolt Mester

Reputation: 125

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.

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>

Upvotes: 1

Views: 65

Answers (1)

Dez
Dez

Reputation: 5838

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>

Upvotes: 1

Related Questions