Динамическое выпадающее меню без внешнего файла

Question

Я пытался создать динамический выпадающий список на моей странице. Идея состоит в том, что, когда пользователь меняет одну выпадающую, следующая заполняется на основе первой.

Я использовал учебник здесь: https://css-tricks.com/dynamic-dropdowns/, но руководство использует внешние текстовые/json-файлы. Может ли кто-нибудь помочь мне понять, как я буду изменять код для текста/json, поэтому мне не нужно использовать внешние файлы (т. Е. У меня могут быть мои параметры в файле html)

Текст на текущий момент выглядит следующим образом:

$("#first-choice").change(function() { 
 
    $("#second-choice").load("textdata/" + $(this).val() + ".txt"); 
 
});

Для JSON код выглядит следующим образом:

$("#first-choice").change(function() { 
 

 
\t var $dropdown = $(this); 
 

 
\t $.getJSON("jsondata/data.json", function(data) { 
 
\t 
 
\t \t var key = $dropdown.val(); 
 
\t \t var vals = []; 
 
\t \t \t \t \t \t \t 
 
\t \t switch(key) { 
 
\t \t \t case 'beverages': 
 
\t \t \t \t vals = data.beverages.split(","); 
 
\t \t \t \t break; 
 
\t \t \t case 'snacks': 
 
\t \t \t \t vals = data.snacks.split(","); 
 
\t \t \t \t break; 
 
\t \t \t case 'base': 
 
\t \t \t \t vals = ['Please choose from above']; 
 
\t \t } 
 
\t \t 
 
\t \t var $secondChoice = $("#second-choice"); 
 
\t \t $secondChoice.empty(); 
 
\t \t $.each(vals, function(index, value) { 
 
\t \t \t $secondChoice.append("<option>" + value + "</option>"); 
 
\t \t }); 
 

 
\t }); 
 
});

Благодаря

Answer 1

Простое решение будет иметь несколько скрытых падение падения, которые затем отображаются в зависимости от значения первого:

$('.first').change(function(){ 
 
    $('.option').removeClass('show'); 
 
    var val = $(this).val(); 
 
    switch(val){ 
 
    case 'Option 1': 
 
     $('.option.one').addClass('show'); 
 
     break; 
 
    case 'Option 2': 
 
     $('.option.two').addClass('show'); 
 
     break; 
 
    case 'Option 3': 
 
     $('.option.three').addClass('show'); 
 
     break; 
 
    } 
 
})

.option{ 
 
    display:none; 
 
} 
 
.show{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="first"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
</select> 
 

 
<select class="option one show"> 
 
    <option>a</option> 
 
    <option>b</option> 
 
    <option>c</option> 
 
</select> 
 
<select class="option two"> 
 
    <option>d</option> 
 
    <option>e</option> 
 
    <option>f</option> 
 
</select> 
 
<select class="option three"> 
 
    <option>g</option> 
 
    <option>h</option> 
 
    <option>i</option> 
 
</select>

или к сделайте это в своем jquery вручную установите массивы

$("#first-choice").change(function() { 
 

 
    var $dropdown = $(this); 
 

 
\t var key = $dropdown.val(); 
 
       var vals = [] 
 
\t var beverages = ["tea" , "coffee" , "juice"]; 
 
       var snacks = ["burger" , "sandwich" , toast"]; 
 

 
\t \t \t \t \t \t 
 
\t switch(key) { 
 
\t \t case 'beverages': 
 
\t \t \t vals = beverages; 
 
\t \t \t break; 
 
\t \t case 'snacks': 
 
\t \t \t vals = snacks; 
 
\t \t \t break; 
 
\t \t case 'base': 
 
\t \t \t vals = ['Please choose from above']; 
 
\t } 
 
\t 
 
\t var $secondChoice = $("#second-choice"); 
 
\t $secondChoice.empty(); 
 
\t $.each(vals, function(index, value) { 
 
\t \t $secondChoice.append("<option>" + value + "</option>"); 
 
\t }); 
 

 
});