• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 786
  • Last Modified:

Filter country /state in Javascript

Hi,

I need to  create a filter in javascript that will start with country and depending on the country i choose it filters down the states and shows only states in that country and then i want it to filter down to based on state too, so it will show cities in the state based on what state i choose.

I found some script  to do this on only one level but it doesnt even work well. anyone knows how i can do this in java script? or is there any where i can find code that does this?

thanks!!
0
mrperfect75000
Asked:
mrperfect75000
  • 4
  • 3
1 Solution
 
geordie007Commented:

try this:

<form>
      <select id="countries" onchange="updatestates(this.selectedIndex)" style="width: 150px">
            <option selected>Select A Country</option>
            <option value="usa">USA</option>
            <option value="uk">United Kingdom</option>
      </select>
      
      <select id="states" onchange="updatecities(this.selectedIndex)" style="width: 150px">
      </select>

      <select id="cities" style="width: 150px">
      </select>
</form>

<script type="text/javascript">
<!--
var countrieslist = document.getElementById("countries");
var stateslist = document.getElementById("states");
var citieslist = document.getElementById("cities");

var states = new Array()
states[0] = "";
states[1] = ["Select A State|", "California|california", "Texas|texas"];
states[2] = ["Select A State|", "Middlesex|middlesex", "Surrey|surrey"];

var cities = new Array()
cities[0] = "";

cities[1] = new Object;
cities[1][0] = "";
cities[1][1] = ["Select A City|", "San Francisco|san_francisco","Los Angeles|los_angeles"];
cities[1][2] = ["Select A City|", "Select A State|", "Dallas|dallas","Houston|houston"];

cities[2] = new Object;
cities[2][0] = "";
cities[2][1] = ["Select A City|", "Teddington|teddington","Hampton|hampton"];
cities[2][2] = ["Select A City|", "Kingston|kingston","Guildford|guildford"];

var country;

function updatestates(selectedcitygroup){
      country = selectedcitygroup;
      stateslist.options.length = 0;
      citieslist.options.length = 0;
      if(selectedcitygroup>0){
            for(i=0; i<states[selectedcitygroup].length; i++){
                  stateslist.options[stateslist.options.length]=new Option(states[selectedcitygroup][i].split("|")[0], states[selectedcitygroup][i].split("|")[1])
            }
      }
}

function updatecities(selectedcitygroup){
      citieslist.options.length = 0;
      if(selectedcitygroup>0){
            for(i=0; i<cities[country][selectedcitygroup].length; i++){
                  citieslist.options[citieslist.options.length]=new Option(cities[country][selectedcitygroup][i].split("|")[0], cities[country][selectedcitygroup][i].split("|")[1])
            }
      }
}
//-->
</script>
0
 
mrperfect75000Author Commented:
Perfect - Thanks!
0
 
mrperfect75000Author Commented:
I wanted to add one more thing that that - we have Country, States and Cities. I wanted to add venues to that.

 I can do this for the select
 <select id="venues" style="width: 150px">
     </select>

and i can add a declaration like this in the js

var venuesslist = document.getElementById("venues");

my problem is now with setting up the array as i want it to filter down all the way from country to venue and also setting up the function

var venues = new Array()
venues[0] = "";

Thanks for your help!! I will add more points for this.

thanks
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
geordie007Commented:

like this?

<form>
     <select id="countries" onchange="updatestates(this.selectedIndex)" style="width: 150px">
          <option selected>Select A Country</option>
          <option value="usa">USA</option>
          <option value="uk">United Kingdom</option>
     </select>
     
     <select id="states" onchange="updatecities(this.selectedIndex)" style="width: 150px">
     </select>

     <select id="cities" onchange="updatevenues(this.selectedIndex)" style="width: 150px">
     </select>
      
        <select id="venues" style="width: 150px">
     </select>
</form>

<script type="text/javascript">
<!--
var countrieslist = document.getElementById("countries");
var stateslist = document.getElementById("states");
var citieslist = document.getElementById("cities");
var venueslist = document.getElementById("venues");

var states = new Array()
states[0] = "";
states[1] = ["Select A State|", "California|california", "Texas|texas"];
states[2] = ["Select A State|", "Middlesex|middlesex", "Surrey|surrey"];

var cities = new Array()
cities[0] = "";

cities[1] = new Object;
cities[1][0] = "";
cities[1][1] = ["Select A City|", "San Francisco|san_francisco","Los Angeles|los_angeles"];
cities[1][2] = ["Select A City|", "Dallas|dallas","Houston|houston"];

cities[2] = new Object;
cities[2][0] = "";
cities[2][1] = ["Select A City|", "Teddington|teddington","Hampton|hampton"];
cities[2][2] = ["Select A City|", "Kingston|kingston","Guildford|guildford"];

var venues = new Array()
venues[0] = "";

venues[1] = new Object;
venues[1][0] = "";
venues[1][1] = new Object;
venues[1][1][0] = "";
venues[1][1][1] = ["Select A Venue|", "SF 1|sf_1","SF 2|sf_2"];
venues[1][1][2] = ["Select A Venue|", "LA 1|la_1","LA 2|la_2"];
venues[1][2] = new Object;
venues[1][2][0] = "";
venues[1][2][1] = ["Select A Venue|", "D 1|d_1","D 2|D_2"];
venues[1][2][2] = ["Select A Venue|", "H 1|h_1","H 2|h_2"];

venues[2] = new Object;
venues[2][0] = "";
venues[2][1] = new Object;
venues[2][1][0] = "";
venues[2][1][1] = ["Select A Venue|", "T 1|t_1","T 2|t_2"];
venues[2][1][2] = ["Select A Venue|", "H 1|h_1","H 2|h_2"];
venues[2][2] = new Object;
venues[2][2][0] = "";
venues[2][2][1] = "";
venues[2][2][2] = ["Select A Venue|", "K 1|k_1","K 2|k_2"];
venues[2][2][3] = ["Select A Venue|", "G 1|g_1","G 2|g_2"];

var country, state;

function updatestates(selectedcitygroup){
     country = selectedcitygroup;
     stateslist.options.length = 0;
     citieslist.options.length = 0;
     if(selectedcitygroup>0){
          for(i=0; i<states[selectedcitygroup].length; i++){
               stateslist.options[stateslist.options.length]=new Option(states[selectedcitygroup][i].split("|")[0], states[selectedcitygroup][i].split("|")[1])
          }
     }
}

function updatecities(selectedcitygroup){
       citieslist.options.length = 0;
       state = selectedcitygroup;
       venueslist.options.length = 0;
     if(selectedcitygroup>0){
          for(i=0; i<cities[country][selectedcitygroup].length; i++){
                     citieslist.options[citieslist.options.length]=new Option(cities[country][selectedcitygroup][i].split("|")[0], cities[country][selectedcitygroup][i].split("|")[1])
          }
     }
}

function updatevenues(selectedcitygroup){
       venueslist.options.length = 0;
       if(selectedcitygroup>0){
          for(i=0; i<venues[country][state][selectedcitygroup].length; i++){
               venueslist.options[venueslist.options.length]=new Option(venues[country][state][selectedcitygroup][i].split("|")[0], venues[country][state][selectedcitygroup][i].split("|")[1])
          }
     }
}
//-->
</script>
0
 
mrperfect75000Author Commented:
How can i give this person more points?
0
 
geordie007Commented:
"How can i give this person more points?"

i'm not sure you can give me more than 500 points, but thank you very much for trying. glad i could help.
0
 
mrperfect75000Author Commented:
Thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now