Solved

Filter country /state in Javascript

Posted on 2006-06-21
7
750 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now