Solved

Filter country /state in Javascript

Posted on 2006-06-21
7
752 Views
Last Modified: 2012-08-13
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
Comment
Question by:mrperfect75000
  • 4
  • 3
7 Comments
 
LVL 7

Accepted Solution

by:
geordie007 earned 500 total points
ID: 16952349

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
 

Author Comment

by:mrperfect75000
ID: 16952500
Perfect - Thanks!
0
 

Author Comment

by:mrperfect75000
ID: 16953896
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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
LVL 7

Expert Comment

by:geordie007
ID: 16958327

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
 

Author Comment

by:mrperfect75000
ID: 16963813
How can i give this person more points?
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16967228
"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
 

Author Comment

by:mrperfect75000
ID: 16984462
Thanks
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Get the number of current month days 2 26
HTML5 Get data in table rows 5 29
how can i check if the text is an Isogram ? 2 26
Why doesn't Google directions work? 6 46
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question