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
Solved

HTML code

Posted on 2003-10-22
4
145 Views
Last Modified: 2010-04-09
Hi,
   i have to display 2 combo boxes using HTML tags. I need to show all countries in one combobox and when i select a country then the states corresponding to that selected country should be displayed in second combo box.
0
Comment
Question by:sunny08
  • 3
4 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 9598726
Here is an example using cities and states:


<HTML>
<HEAD>
<TITLE>Dynamic SELECTs</title>
<SCRIPT language='JavaScript'>
<!-- //

 // create js arrays to hold the data for selCity

 var aryCityData = new Array();

 aryCityData[0] = new Array();
 aryCityData[0][0] = new Option('Select a State','0');

 aryCityData[1] = new Array();
 aryCityData[1][0] = new Option('Los Angeles','301');
 aryCityData[1][1] = new Option('Oakland','304');
 aryCityData[1][2] = new Option('Rio Linde','305');
 aryCityData[1][3] = new Option('San Diego','302');
 aryCityData[1][4] = new Option('San Fransisco','303');

 aryCityData[2] = new Array();
 aryCityData[2][0] = new Option('Miami','101');
 aryCityData[2][1] = new Option('Orlando','102');
 aryCityData[2][2] = new Option('Tampa','103');

 aryCityData[3] = new Array();
 aryCityData[3][0] = new Option('Abilene','201');
 aryCityData[3][1] = new Option('Austin','202');
 aryCityData[3][2] = new Option('Dallas','203');
 aryCityData[3][3] = new Option('Houston','204');


 function reloadCities(curStateIndex)  // pass in the current State index
 {
    if ( curStateIndex < 0 ) return;  // no state selected, so do nothing

    var aryCityOpts = document.myform.selCity.options;  // points to selCity options array

    aryCityOpts.length=0;  // first, clear the current City options ...

    // then re-load the City options with values for the current State
    for ( var i=0,n=aryCityData[curStateIndex].length; i<n; i++ )
    {
       //// the line below no longer works in IE5 (it works in IE4 and NS4+).
       // aryCityOpts[aryCityOpts.length-1] = new Option(aryCityData[curStateIndex][i].text,aryCityData[curStateIndex][i].value);
       //// therefore, it now takes three lines to do the same thing:

       aryCityOpts.length++;  // add a new Option, then put data in it (below)
       aryCityOpts[aryCityOpts.length-1].text  = aryCityData[curStateIndex][i].text;
       aryCityOpts[aryCityOpts.length-1].value = aryCityData[curStateIndex][i].value;
    }
 }

// -->
</script>

</head>

<BODY onLoad='document.myform.selState.focus();'>
 <FORM name='myform' method='post' action='whatever.asp' onSubmit='return(false);'>

   State: &nbsp;
   <SELECT name='selState' size='1' onChange='reloadCities(this.selectedIndex);'>
     <OPTION value='0'></option>
     <OPTION value='30'>California</option>
     <OPTION value='10'>Florida</option>
     <OPTION value='20'>Texas</option>
   </select><P>

   City: &nbsp; &nbsp;
   <SELECT name='selCity' size='1' onChange='alert(this.options[this.selectedIndex].value)'>
     <OPTION value=''>Select a State</option>
     <OPTION></option>
     <OPTION></option>
     <OPTION></option>
   </select><P>

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

Author Comment

by:sunny08
ID: 9598778
Hi knightEknight,
    Thankyou for your quick response, but i was able to code for states and cities but i was not able to write correct code for getting countries and states. Can u please give a solution for this problem.

Regards
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 125 total points
ID: 9598946
... I'm not sure what you are asking.  All you have to do is rename States to Countries, and rename Cities to States, then substitute the correct values for each in the array and in the Country SELECT.  (For clarity, you may also wish to rename the arrays and form elements accordingly.)  Let me know if this is not clear.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9599051
thanks, I hope that was clear enough to solve your problem.
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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

809 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