How do I populate one select from a choice in another select using jquery and a json array

Question

Here is my selects and a json array I could use to populate the second div based on a choice.

I want to erase the second select options first, then populate the options and set the selected value to the first item

<select name="select1" id="select1" class="form-control">
    <option value="2">Theme 1</option>
    <option value="1">Theme 2</option>
    <option value="0">unnamed theme</option>
</select>

<select name="select2" id="select2" class="form-control">
    <option value="49">Products</option>
</select>

json array (created from database values using PHP to echo it out)

{"2":{"49":"Products"},"1":{"48":"Product 48","50":"Opportunity","51":"Enroll"},"0":{"52":"Discover product 52","53":"Moringa Support","54":"Product 54","55":"product 55"}}

Answer 1

The below is how I would do this.

Essentially it works like this:

• on your first select add the class select-master
• add a data attribute select-info whose value is the name of the variable that holds the needed JSON
• add a data attribute select-slave whose value is the selector to target the second select box
• attach an event handler to any select with the class select-master
• when the select-master changes, use the selected value to get the options from the JSON, get the second select, populate it with options

Note that I have changed the structure of your JSON. I did this so that the structure would have meaning.

 $('.select-master').change(function(){ var $this = $(this); var val = $this.val(); var possibleSelections =window[$this.data('select-info')]; // get the JSON for this box, you could store the JSON in the data attribute itself but this method makes it easier to use the same JSON for multiple boxes easily if needed var $slave = $($this.data('select-slave')).html(''); // get the selector for the other select box, find the box, and clear it's contents all in one go var selection = possibleSelections[val]; if(selection){ $.each(selection.options,function(i,option){ var selected = i == 0 ? 'selected' : ''; $slave.append('<option selected="'+selected+'" value="'+option.value+'">'+option.text+'</option>'); }); } }); var selections = { "0": { options: [{ value: 52, text: "Discover product 52" }, { value: 53, text: "Moringa Support" }, { value: 54, text: "Product 54" }, { value: 55, text: "product 55" }] }, "1": { options: [{ value: 48, text: "Product 48" }, { value: 50, text: "Opportunity" }, { value: 51, text: "Enroll" }] }, "2": { options: [{ value: 49, text: "Products" }] } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="select1" id="select1" class="form-control select-master" data-select-slave="#select2" data-select-info="selections"> <option value="2">Theme 1</option> <option value="1">Theme 2</option> <option value="0">unnamed theme</option> </select> <select name="select2" id="select2" class="form-control"> <option value="49">Products</option> </select>