Populate ein Drop-Down-Liste basierend auf einem anderen Dropdown-Liste

Question

Ich habe zwei Drop-Down-Menüs wie folgt:

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

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

    </select> 
</form> 

Und ich habe ein Wörterbuch Objekt, in dem die Schlüssel sind die Optionen für A und die Werte sind B Arrays entsprechend jedes Element in A wie folgt:

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

wie kann ich das Menü dynamisch B bevölkern auf das, was der Benutzer im Menü A?

Answer 1

Binden Sie einen Change-Event-Handler und füllen Sie das zweite Select-Tag basierend auf dem ausgewählten Wert.

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

Sie können einen Änderungsempfänger erstellen für das erste Auswahlfeld und bevölkern die html des zweiten Auswahlfeld.

Siehe Demo unter:

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

Diese dynamisch beide select s wird bevölkern:

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>