jquery Autofill select with options from array

Question

I'm going to have a total of 4 dropdowns. What I'm thinking is creating 3 arrays (first is dropdown is hardcoded), and based what's picked on in the first array, the 2nd dropdown gets populated. How do I filter out what displays based on the first selection? I already know what all the options will be for the 2nd,3rd,4th menu. Here's what I'm thinking:

var secondDropdown = ['Cat|c1|1','Dog|d1|1','Banana|b1|2','Apple|a1|2','Car|c2|3','Boat|b2|3'] // here's where i'm lost. How do I create an array that has 3 values. first is the display text, second is the value and third is the filter.

<select id="menu1">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
</select>

<select id="menu2"></select>

Expected result of menu2 after selecting the first dropDown would be

<select id="menu2">
    <option value="c1">Cat</option>
    <option value="d1">Dog</option>
</select

So if I pick the first option, it'll take the value and match it up with the filter in the first array and populate the 2nd dropdown. Any ideas?

Answer 1

this can be an approach:

 $(function() { var secondDropdown = [{ filter: "1", values: [{ value: "b1", text: "Boat" }, { value: "b2", text: "Boat2" }, { value: "b3", text: "Boat3" }] }, { filter: "2", values: [{ value: "c1", text: "Cat" }, { value: "c2", text: "Cat2" }, { value: "c3", text: "Cat3" }] }]; $('#menu1').change(function() { var currentValue = $(this).val(); $('#menu2').html(""); var content = secondDropdown.filter(function(elem) { return elem.filter == currentValue; }); $.each(content[0] != undefined ? content[0].values : [], function(i, elem) { $('#menu2').append("<option value='" + elem.value + "'>" + elem.text + "</option>"); }); }).trigger("change"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="menu1"> <option value="1">First Option</option> <option value="2">Second Option</option> <option value="3">Third Option</option> </select> <select id="menu2"></select>

Answer 2

Inside your Array, use more Arrays with options values.

 var secondDropdown = [ ["Cat", "Dog", "Unicorn"], ["Banana", "Apple", "Strawberry", "Pear", "Rapsberry"], ["Car", "Boat"] ]; $("#menu1").on("change", function(){ var drop2arr = secondDropdown[this.value-1]; $("#menu2").html(function(){ return "<option>"+ (drop2arr.join("</option><option>")) +"</option>"; }); }).change();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="menu1"> <option value="1">Animals</option> <option value="2">Fruits</option> <option value="3">Things</option> </select> <select id="menu2"></select>

Answer 3

This code works fine.

var secondDropdown = ['cat|1','Dog|1','Banana|2','Apple|2','Car|3','Boat|3']; // here's where i'm lost. How do I create an array that has 2 values. first is the regular value and second value is the filter.
$("#menu1").on("change", function(){
    $("#menu2").html('');
    //Get current value of Menu1 on change event
    var value=$(this).val();
    for(var i = 0; i < secondDropdown.length; i++)
    {
        //Get associed values
        var splitted = secondDropdown[i].split('|');
        if(splitted[1] === value)
        {
            //append in the second select
            $("#menu2").append('<option value="'+splitted[1]+'">'+splitted[0]+'</option>');
        }
    }
});