Checkbox

Question

I’m having trouble creating a web page where I have select boxes dependent on it. For example, after selecting the first box the values of the second one vary according to the selected option. The fields of the two boxes (values) come from a database. It can be using javascript, jquerry, etc.

Can someone help me ? Thank you

Answer 1

Pablo,

You can use this example of selecting "Country / State / City".

Basically working with the select box "onchange" events:

<form name="myform" id="myForm">
  <select id="countySel" size="1">
        <option value="" selected="selected">-- Select Country --</option>
    </select>
     <br>
    <br>

    <select id="stateSel" size="1">
        <option value="" selected="selected">-- Select State--</option>
    </select>
    <br>
    <br>    
    <select id="citySel" size="1">
        <option value="" selected="selected">-- Select City--</option>
    </select>
    <br>
    <br>
    <select id="zipSel" size="1">
        <option value="" selected="selected">-- Select Zip--</option>
    </select>
</form>

var countryStateInfo = {
    "USA": {
        "California": {
            "Los Angeles": ["90001", "90002", "90003", "90004"],
            "San Diego": ["92093", "92101"]
        },
        "Texas": {
            "Dallas": ["75201", "75202"],
            "Austin": ["73301", "73344"]
        }
    },
    "India": {
        "Assam": {
            "Dispur": ["781005"],
            "Guwahati" : ["781030", "781030"]
        },
        "Gujarat": {
            "Vadodara" : ["390011", "390020"],
            "Surat" : ["395006", "395002"]
        }
    }
}


window.onload = function () {

    //Get html elements
    var countySel = document.getElementById("countySel");
    var stateSel = document.getElementById("stateSel"); 
    var citySel = document.getElementById("citySel");
    var zipSel = document.getElementById("zipSel");

    //Load countries
    for (var country in countryStateInfo) {
        countySel.options[countySel.options.length] = new Option(country, country);
    }

    //County Changed
    countySel.onchange = function () {

         stateSel.length = 1; // remove all options bar first
         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first

         if (this.selectedIndex < 1)
             return; // done

         for (var state in countryStateInfo[this.value]) {
             stateSel.options[stateSel.options.length] = new Option(state, state);
         }
    }

    //State Changed
    stateSel.onchange = function () {        

         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first

         if (this.selectedIndex < 1)
             return; // done

         for (var city in countryStateInfo[countySel.value][this.value]) {
             citySel.options[citySel.options.length] = new Option(city, city);
         }
    }

    //City Changed
    citySel.onchange = function () {
        zipSel.length = 1; // remove all options bar first

        if (this.selectedIndex < 1)
            return; // done

        var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
        for (var i = 0; i < zips.length; i++) {
            zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
        }
    }   
}

https://jsfiddle.net/patelriki13/m1ezs70o/