Заполнение значений в выпадающие

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>'); 
    } 

});