javascript - 在下拉列表中填充值

Question

我需要使用 javascript/jquery 创建下拉菜单

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

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

仅当从第二个下拉列表中选择的值不是“选择”时，才应显示第三个下拉列表

<option value="0">Select</option>
<option value="111">superSubOcc1</option>
<option value="112">superSubOcc2</option>
<option value="113">superSubOcc3</option>
<option value="114">superSubOcc4</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>');
    }

});