javascript - Drop down menu for selecting country then states then district

I am not able to design the function "print_district" to get the values from s_b. Kindly help me to defined this multidimensional array.

I suppose to get c11,c12,c13,... on selection from C1 from country country 1 and c21,c22,c23,... on selecting C2 from country 1 But I am getting d11,d12,d13,... and d12,d22,23 so on which is from country 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type= "text/javascript">
var country_arr = new Array("country 1", "country 2");
var s_a = new Array();
s_a[0]="";
s_a[1]="C1|C2";
s_a[2]="D1|D2";

var s_b = new Array();
s_b[1,1]="c11|c12|c13|c14|c15|c16|c17|c18|c19|c10";
s_b[1,2]="c21|c22|c23|c24|c25|c26|c27|c28|c29|c210";
s_b[2,1]="d11|d12|d13|d14|d15|d16|d17|d18|d19|d10";
s_b[2,2]="d21|d22|d23|d24|d25|d26|d27|d28|d29|d210";
function print_country(country_id){
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select Country','');
    option_str.selectedIndex = 0;
    for (var i=0; i<country_arr.length; i++) {
        option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
    }
}

function print_state(state_id, state_index){
    var option_str = document.getElementById(state_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select State','');
    option_str.selectedIndex = 0;
    var state_arr = s_a[state_index].split("|");
    for (var i=0; i<state_arr.length; i++) {
        option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
    }
}
//This function is incorrect, just to demonstrate, please help to correct this

function print_district(district_id, district_index){
    var option_str = document.getElementById(district_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select district','');
    option_str.selectedIndex = 0;
    var district_arr = s_b[district_index].split("|");
    for (var i=0; i<district_arr.length; i++) {
        option_str.options[option_str.length] = new Option(district_arr[i],district_arr[i]);
    }
}

</script>
</head>

<body>
<form>
Select Country:   <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country" ></select>
        <br />
        State: <select onchange="print_district('district',this.selectedIndex);" name ="state" id ="state"></select>
        <br />
        District <select name ="district" id ="district"></select>
        <input type="submit"></form>
        <script language="javascript">print_country("country");</script>
</body>
</html>

Thanks in advance !

I am not able to design the function "print_district" to get the values from s_b. Kindly help me to defined this multidimensional array.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type= "text/javascript">
var country_arr = new Array("country 1", "country 2");
var s_a = new Array();
s_a[0]="";
s_a[1]="C1|C2";
s_a[2]="D1|D2";

var s_b = new Array();
s_b[1,1]="c11|c12|c13|c14|c15|c16|c17|c18|c19|c10";
s_b[1,2]="c21|c22|c23|c24|c25|c26|c27|c28|c29|c210";
s_b[2,1]="d11|d12|d13|d14|d15|d16|d17|d18|d19|d10";
s_b[2,2]="d21|d22|d23|d24|d25|d26|d27|d28|d29|d210";
function print_country(country_id){
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select Country','');
    option_str.selectedIndex = 0;
    for (var i=0; i<country_arr.length; i++) {
        option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
    }
}

function print_state(state_id, state_index){
    var option_str = document.getElementById(state_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select State','');
    option_str.selectedIndex = 0;
    var state_arr = s_a[state_index].split("|");
    for (var i=0; i<state_arr.length; i++) {
        option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
    }
}
//This function is incorrect, just to demonstrate, please help to correct this

function print_district(district_id, district_index){
    var option_str = document.getElementById(district_id);
    option_str.length=0;
    option_str.options[0] = new Option('Select district','');
    option_str.selectedIndex = 0;
    var district_arr = s_b[district_index].split("|");
    for (var i=0; i<district_arr.length; i++) {
        option_str.options[option_str.length] = new Option(district_arr[i],district_arr[i]);
    }
}

</script>
</head>

<body>
<form>
Select Country:   <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country" ></select>
        <br />
        State: <select onchange="print_district('district',this.selectedIndex);" name ="state" id ="state"></select>
        <br />
        District <select name ="district" id ="district"></select>
        <input type="submit"></form>
        <script language="javascript">print_country("country");</script>
</body>
</html>

Thanks in advance !

Share Improve this question edited Nov 9, 2014 at 15:30 asked Nov 9, 2014 at 6:24 Deep 3015 10.1k5 gold badges32 silver badges54 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

This is the solution to the above problem

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var stateObject = {
    "Country 1": {
        "C1": ["c11", "c12"],
        "C2": ["c21", "c22"]
    },
    "Country 2": {
        "D1": ["d11", "d12"],
        "D2": ["d21", "d22"]
    }
}
window.onload = function () {
    var countySel = document.getElementById("countySel"),
        stateSel = document.getElementById("stateSel"),
        districtSel = document.getElementById("districtSel");
    for (var country in stateObject) {
        countySel.options[countySel.options.length] = new Option(country, country);
    }
    countySel.onchange = function () {
        stateSel.length = 1; // remove all options bar first
        districtSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        for (var state in stateObject[this.value]) {
            stateSel.options[stateSel.options.length] = new Option(state, state);
        }
    }
    countySel.onchange(); // reset in case page is reloaded
    stateSel.onchange = function () {
        districtSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        var district = stateObject[countySel.value][this.value];
        for (var i = 0; i < district.length; i++) {
            districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
        }
    }
}
</script>
</head>

<body>
<form name="myform" id="myForm">
    Select Country: <select name="state" id="countySel" size="1">
        <option value="" selected="selected">Select Country</option>
    </select>
    <br>
    <br>
    Select State: <select name="countrya" id="stateSel" size="1">
        <option value="" selected="selected">Please select Country first</option>
    </select>
    <br>
    <br>
    Select District: <select name="district" id="districtSel" size="1">
        <option value="" selected="selected">Please select State first</option>
    </select><br>
    <input type="submit">

</form>
</body>
</html>

Angular 5 - based example it's working. To get values use Form builder and form group.

template.html

 <div>
    <h2>Hello country/ state/ cities </h2>

    <select (change)="countryChange($event)" >
      <option>Select</option>
      <option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
    </select>

    <select (change)="statesChange($event)">
      <option>Select</option>
      <option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
    </select>

    <select >
      <option>Select</option>
      <option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
    </select>
  </div>

ponent.ts

 countries= [{
            "country": "Afghanistan",
      "states": [
                  { "name":"Nurestan", "cities":["c1", "c2", "c3"]  },
                  { "name":"Oruzgan", "cities":["orc1", "oruc2", "oruc3"] },
                  { "name":"Panjshir", "cities":["3c1", "3c2", "3c3"]  }
                ]
    },
    {
            "country": "Albania",
            "states": [ 
                  { "name": "Korce" , "cities":["c1", "c2", "c3"] },
                  { "name": "Kukes",  "cities":["orc1", "oruc2", "oruc3"] },
                  { "name": "Lezhe","cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Shkoder", "cities":["orc1", "oruc2", "oruc3"]},
                  { "name": "Tirane","cities":["orc1", "oruc2", "oruc3"]}
                ]
        },      
        {
            "country": "Antarctica",
            "states": []
        }           
    ]

    states= []; cities = [];
    countryChange(e){
      console.log(e.target.value)
      this.countries.filter(element => {
        if(element.country == e.target.value){
          console.log(element.states[0],"first state")
          this.states = element.states;
        }
      });
      this.cities = []
    }
    statesChange(evt){
      console.log(evt.target.value,this.states)
      this.states.filter( element =>{
        if(element.name == evt.target.value){
          this.cities = element.cities;
        }
      })
    }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Drop down menu for selecting country then states then district - Stack Overflow

2 Answers 2

template.html

ponent.ts

与本文相关的文章

评论列表(0)