Question

我需要使用javascript / jquery

创建下拉列表

第一个下拉列表中的值应如下所示：

CC=<compilerpath>

仅当从第一个下拉列表中选择的值是其他选择

时，才会显示第二个下拉列表

<option value="0">Select</option>
<option value="1">Occ1</option>
<option value="2">Occ2</option>

仅当从第二个下拉列表中选择的值不是选择

时，才会显示第三个下拉列表

<option value="0">Select</option>
<option value="11">subOcc1</option>
<option value="12">subOcc2</option>

有人可以帮帮我吗？

Answer 1

希望这适合你。

<强> HTML

<select id="select1">
    <option value="0">select</option>
</select>
<br/>
<select id="select2">
    <option value="0">select</option>
</select>
<br/>
<select id="select3">
    <option value="0">select</option>
</select>

<强> JS

for (var key in data) {
    $("#select1").append('<option value="' + key + '">' + data[key].name + '</option>');
}

$("#select1").change(function () {
    $('#select2').find('option').filter(function () {
        return $(this).val() != '0';
    }).remove();

    $('#select3').find('option').filter(function () {
        return $(this).val() != '0';
    }).remove();

    var currentSelect = $(this).val();
    var currentOccupation = data[currentSelect].occupation;
    for (var key in currentOccupation) {
        $("#select2").append('<option value="' + key + '">' + currentOccupation[key].name + '</option>');
    }

});


$("#select2").change(function () {
    $('#select3').find('option').filter(function () {
        return $(this).val() != '0';
    }).remove();

    var currentSelect1 = $("#select1").val();
    var currentSelect2 = $(this).val();
    var currentOccupation = data[currentSelect1].occupation[currentSelect2].occupation;

    for (var key in currentOccupation) {
        $("#select3").append('<option value="' + currentOccupation[key].occCode + '">' + currentOccupation[key].name + '</option>');
    }

});

在下拉列表中填充值

1 个答案: