Populate список один выпадающий на основе другого списка

Question

У меня есть два выпадающих меню следующим образом:

<form id="dynamicForm"> 
    <select id="A"> 

    </select> 
    <select id="B"> 

    </select> 
</form> 

И у меня есть объект словаря, где ключи являются вариантами A и значение, B массивы, соответствующих каждый элемент A следующим образом:

var diction = { 
    A1: ["B1", "B2", "B3"], 
    A2: ["B4", "B5", "B6"] 
} 

Как я могу динамически заполнять меню B, основываясь на том, что выбирает пользователь в меню A?

Answer 1

Связать обработчик события изменения и заполнить второй тег выбора на основе выбранного значения.

var diction = { 
 
    A1: ["B1", "B2", "B3"], 
 
    A2: ["B4", "B5", "B6"] 
 
} 
 

 
// bind change event handler 
 
$('#A').change(function() { 
 
    // get the second dropdown 
 
    $('#B').html(
 
     // get array by the selected value 
 
     diction[this.value] 
 
     // iterate and generate options 
 
     .map(function(v) { 
 
     // generate options with the array element 
 
     return $('<option/>', { 
 
      value: v, 
 
      text: v 
 
     }) 
 
     }) 
 
    ) 
 
    // trigger change event to generate second select tag initially 
 
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="dynamicForm"> 
 
    <select id="A"> 
 
    <option value="A1">A1</option> 
 
    <option value="A2">A2</option> 
 
    </select> 
 
    <select id="B"> 
 
    </select> 
 
</form>

Answer 2

Вы можете создать изменений слушатель для первого поля выбора и заполнение HTML второго выбора коробки.

См демонстрационная ниже:

var diction = { 
 
    A1: ["B1", "B2", "B3"], 
 
    A2: ["B4", "B5", "B6"] 
 
} 
 
$('#A').on('change', function() { 
 
    $('#B').html(
 
    diction[$(this).val()].reduce(function(p, c) { 
 
     return p.concat('<option value="' + c + '">' + c + '</option>'); 
 
    }, '') 
 
); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="dynamicForm"> 
 
    <select id="A"> 
 
    <option value="A1">A1</option> 
 
    <option value="A2">A2</option> 
 
    </select> 
 
    <select id="B"> 
 

 
    </select> 
 
</form>

Answer 3

Это будет динамически заполнять оба select S:

var diction = { 
 
    A1: ["B1", "B2", "B3"], 
 
    A2: ["B4", "B5", "B6"] 
 
}; 
 

 
// the function that will populate the select 
 
function populateSelect(id, values) { 
 
    // get the select element 
 
    var $select = $(id); 
 
    // empty it 
 
    $select.empty(); 
 
    // for each value in values ... 
 
    values.forEach(function(value) { 
 
    // create an option element 
 
    var $option = $("<option value='" + value + "'>" + value + "</option>"); 
 
    // and append it to the select 
 
    $select.append($option); 
 
    }); 
 
} 
 

 
// when the #A select changes ... 
 
$("#A").on("change", function() { 
 
    // get the value of the selected element (the key) 
 
    var key = $(this).val(); 
 
    // populate #B accordingly 
 
    populateSelect("#B", diction[key]); 
 
}); 
 

 
// Before anything, populate #A with the keys of diction and ... 
 
populateSelect("#A", Object.keys(diction)); 
 
// ... #B with whatever #A hold its key 
 
populateSelect("#B", diction[$("#A").val()]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="dynamicForm"> 
 
    <select id="A"> 
 

 
    </select> 
 
    <select id="B"> 
 

 
    </select> 
 
</form>