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

如果您不想在加载时使用第二个选择选项，请添加click事件处理程序，这样如果您从第一个选择中选择所选选项，则会添加第二个选择选项。同时在每个事件的第二个选择中删除先前的选项。

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

JQuery - 更改事件

1 个答案: