Solved

Filter country /state in Javascript

Posted on 2006-06-21
7
756 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
email validation 9 49
need help with share buttons 11 72
Table style position to the left 8 26
Problem in javascript 17 29
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

726 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