JQuery - 选择选项不附加在更改事件上

Question

我在将选择选项添加到 select 元素时遇到问题。我有两个选择元素，我想根据第一个元素的值生成第二个元素选项。

• 首先我在加载每个元素时将元素添加到第一个框
• 用户在第一个框中选择一个选项，并基于此第二个选择框获得可供选择的选项

下面的代码对我不起作用，因为在第一个选择框中选择了一个选项后，第二个没有添加任何选项。

我正在使用 Bootstrap-Select jQuery 插件

有人有什么建议吗？ ：/ 谢谢。

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

如果您不想在加载时使用第二个选择选项，请添加单击事件处理程序，因此如果您从第一个选择中选择您选择的选项，则会添加第二个选择选项。还要删除每个事件的第二次选择之前的选项。

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