...

View Full Version : problem in select menu



Mido™
09-03-2010, 02:42 PM
I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:


<select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>


but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?

abduraooft
09-03-2010, 03:03 PM
You can't use document.write() for in this context, since this function executes at the time of page loads.

Google for chained+select+javascript

DaveyErwin
09-03-2010, 04:04 PM
You can't use document.write() for in this context, since this function executes at the time of page loads.


No no , I believe you have erred.
Check this ...




<html>
<head>
<title></title>
</head>
<body>
<span>Chained boxs </span>


<script type="text/javascript">
(function(){
document.write("<select onchange='if(this.selectedIndex){this.nextSibling.options[0].text=\"hiya\"}else{this.nextSibling.options[0].text=\"GoodBye\"}'>")
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("</select>")

document.write("<select>")
document.write("<option value=''></option>");
document.write("<option value=''></option>");
document.write("</select>")
})()




</script>

</body>
</html>

Mido™
09-03-2010, 10:04 PM
No no , I believe you have erred.
Check this ...




<html>
<head>
<title></title>
</head>
<body>
<span>Chained boxs </span>


<script type="text/javascript">
(function(){
document.write("<select onchange='if(this.selectedIndex){this.nextSibling.options[0].text=\"hiya\"}else{this.nextSibling.options[0].text=\"GoodBye\"}'>")
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("</select>")

document.write("<select>")
document.write("<option value=''></option>");
document.write("<option value=''></option>");
document.write("</select>")
})()




</script>

</body>
</html>

Thanks but I tried your code and I found it didn't fix the problem or gave the solution as the second menu didn't appear or changed when you select an item from the first menu, only a new menu appeared and it's item were hiya or GoodBye which you wrote in the first menu onchange function.

Mido™
09-03-2010, 10:05 PM
You can't use document.write() for in this context, since this function executes at the time of page loads.

Google for chained+select+javascript

Thanks and I searched for it but still didn't find a good example without using Ajax.

Old Pedant
09-03-2010, 11:08 PM
Here, try this:


<html>
<head>
<title>Category and Subcategory Drop Down Lists Via JavaScript</title>
<script type="text/javascript">
// constructor for a SubCat object:
function SubCat( cn, scn, scnm )
{
this.CatNum = cn;
this.SubcatNum = scn;
this.SubcatName = scnm;
}

// ***************************************************************
// establish the array of subcategory info:
var subcatInfo = new Array(
new SubCat('1001','3','Beans'),
new SubCat('1001','4','Corn'),
new SubCat('1001','5','Miscellaneous'),
new SubCat('1001','2','Potato'),
new SubCat('1001','1','Tomato'),
new SubCat('1002','2','Bran'),
new SubCat('1002','1','Corn Flakes'),
new SubCat('1002','6','Miscellaneous'),
new SubCat('1002','3','Oatmeal'),
new SubCat('1002','5','Pre-sweetened'),
new SubCat('1002','4','Rice'),
new SubCat('1003','5','Miscellaneous'),
new SubCat('1003','4','Pasta'),
new SubCat('1003','2','Rice'),
new SubCat('1003','3','Sugar'),
new SubCat('1003','1','Wheat'),
new SubCat('1004','2','Artificial fruit drinks'),
new SubCat('1004','3','Colas'),
new SubCat('1004','5','Diet drinks'),
new SubCat('1004','1','Fruit juices'),
new SubCat('1004','6','Miscellaneous'),
new SubCat('1004','4','Root beers'),
new SubCat('1005','4','Cookies'),
new SubCat('1005','2','Corn chips'),
new SubCat('1005','5','Crackers'),
new SubCat('1005','7','Dips'),
new SubCat('1005','6','Meat products'),
new SubCat('1005','3','Popcorn'),
new SubCat('1005','1','Potato Chips'),
new SubCat('1006','2','Boxed Chocolates'),
new SubCat('1006','4','Bulk candies'),
new SubCat('1006','1','Chocolate'),
new SubCat('1006','5','Gum'),
new SubCat('1006','3','Hard candies'),
new SubCat('1006','6','Other'),
new SubCat('1007','8','Cakes'),
new SubCat('1007','9','Cakes, custom decorated'),
new SubCat('1007','7','Donuts'),
new SubCat('1007','11','Other'),
new SubCat('1007','10','Pies'),
new SubCat('1007','5','Ryes, etc.'),
new SubCat('1007','6','Speciaty breads, Bakery'),
new SubCat('1007','3','Wheat'),
new SubCat('1007','4','Wheat, Bakery'),
new SubCat('1007','1','White'),
new SubCat('1007','2','White, Bakery')
);

// ***************************************************************

// this function is called upon a change of main category
function doCategory(sel)
{
var ix;
var subcat = sel.form.SubcategorySelect;

// regardless of what else we do, we wipe out all the
// options in the subcategory dropdown by
// going backwards, removing selected options
for ( ix = subcat.options.length - 1; ix >= 0; --ix )
{
subcat.options[ix] = null;
}
// now, did the user select a category?
if ( sel.selectedIndex == 0 )
{
// no...so give user the "no subcats" msg
subcat.options[0] =
new Option("-- no subcategories yet --","0");
return; // and we are done
}
// yes, so get the appropriate subcategories:
subcat.options[0] =
new Option("-- choose a subcategory below --","0");

// what category number was selected?
var catnum = sel.options[sel.selectedIndex].value;
var cursc = 0;
for ( ix = 0; ix < subcatInfo.length; ++ix )
{
// looking for all subcat's with the requested category number
var subcatObj = subcatInfo[ix];
if ( subcatObj.CatNum == catnum )
{
subcat.options[++cursc] =
new Option( subcatObj.SubcatName, subcatObj.SubcatNum );
}
}
}
// done with JS code
</script>
</head>
<body>

<form Name="DemoForm">
What kind of products are you interested in?<br/><br/>

First select a category and then, when the list of subcategories
appears, select a subcategory:<br/>

<select Name="CategorySelect" onchange="doCategory(this);">
<option Value="NONE">-- choose a category below--</option>
<option Value='1007'>Breads</option>
<option Value='1006'>Candies</option>
<option Value='1001'>Canned goods</option>
<option Value='1002'>Cereal</option>
<option Value='1004'>Drinks</option>
<option Value='1005'>Snack foods</option>
<option Value='1003'>Staples</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="SubcategorySelect" >
<option Value="0">-- no subcategories yet --
</select>
</form>
</body>
</html>

Is that what you mean?

Building the list of subcategory options in that way is easy from PHP or JSP or ASP code.

DaveyErwin
09-04-2010, 12:40 AM
Thanks but I tried your code and I found it didn't fix the problem or gave the solution as the second menu didn't appear or changed when you select an item from the first menu, only a new menu appeared and it's item were hiya or GoodBye which you wrote in the first menu onchange function.

Well see I quoted the other poster
that seemed to think document.write()
could not be used this way and the code
was for him to comment on .

Old Pedant
09-04-2010, 12:49 AM
Well see I quoted the other poster
that seemed to think document.write()
could not be used this way.

And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.

DaveyErwin
09-04-2010, 01:03 AM
And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.

Yes, because i was way off on this

I must use a function and use if or switch in it, so what's the solution?

so i put document.write in a function using if ?

also this through me off

seach for chained+select+javascript

I didnt quote and i may have paraphrased

DaveyErwin
09-04-2010, 01:11 AM
And it can't be. You created two <select>s, yes, but not in such a way that what is shown in the second one is *dependent* on what is chosen, by the user, from the first one. Your two <select>s will always be the same, no "filtering" provided.

Did ya run it ?
see thats right from the 3 box trhead
it just sets one option on the second
of course it could set as many as you would
like but i choose to set only one option
which changes when the first box changes
heres what the original poster had to say

only a new menu appeared and it's item were hiya or GoodBye

thats not two options in the same box because i
only set one option it actually chamges dependant on the first box

Mido™
09-04-2010, 01:16 AM
Here, try this:


<html>
<head>
<title>Category and Subcategory Drop Down Lists Via JavaScript</title>
<script type="text/javascript">
// constructor for a SubCat object:
function SubCat( cn, scn, scnm )
{
this.CatNum = cn;
this.SubcatNum = scn;
this.SubcatName = scnm;
}

// ***************************************************************
// establish the array of subcategory info:
var subcatInfo = new Array(
new SubCat('1001','3','Beans'),
new SubCat('1001','4','Corn'),
new SubCat('1001','5','Miscellaneous'),
new SubCat('1001','2','Potato'),
new SubCat('1001','1','Tomato'),
new SubCat('1002','2','Bran'),
new SubCat('1002','1','Corn Flakes'),
new SubCat('1002','6','Miscellaneous'),
new SubCat('1002','3','Oatmeal'),
new SubCat('1002','5','Pre-sweetened'),
new SubCat('1002','4','Rice'),
new SubCat('1003','5','Miscellaneous'),
new SubCat('1003','4','Pasta'),
new SubCat('1003','2','Rice'),
new SubCat('1003','3','Sugar'),
new SubCat('1003','1','Wheat'),
new SubCat('1004','2','Artificial fruit drinks'),
new SubCat('1004','3','Colas'),
new SubCat('1004','5','Diet drinks'),
new SubCat('1004','1','Fruit juices'),
new SubCat('1004','6','Miscellaneous'),
new SubCat('1004','4','Root beers'),
new SubCat('1005','4','Cookies'),
new SubCat('1005','2','Corn chips'),
new SubCat('1005','5','Crackers'),
new SubCat('1005','7','Dips'),
new SubCat('1005','6','Meat products'),
new SubCat('1005','3','Popcorn'),
new SubCat('1005','1','Potato Chips'),
new SubCat('1006','2','Boxed Chocolates'),
new SubCat('1006','4','Bulk candies'),
new SubCat('1006','1','Chocolate'),
new SubCat('1006','5','Gum'),
new SubCat('1006','3','Hard candies'),
new SubCat('1006','6','Other'),
new SubCat('1007','8','Cakes'),
new SubCat('1007','9','Cakes, custom decorated'),
new SubCat('1007','7','Donuts'),
new SubCat('1007','11','Other'),
new SubCat('1007','10','Pies'),
new SubCat('1007','5','Ryes, etc.'),
new SubCat('1007','6','Speciaty breads, Bakery'),
new SubCat('1007','3','Wheat'),
new SubCat('1007','4','Wheat, Bakery'),
new SubCat('1007','1','White'),
new SubCat('1007','2','White, Bakery')
);

// ***************************************************************

// this function is called upon a change of main category
function doCategory(sel)
{
var ix;
var subcat = sel.form.SubcategorySelect;

// regardless of what else we do, we wipe out all the
// options in the subcategory dropdown by
// going backwards, removing selected options
for ( ix = subcat.options.length - 1; ix >= 0; --ix )
{
subcat.options[ix] = null;
}
// now, did the user select a category?
if ( sel.selectedIndex == 0 )
{
// no...so give user the "no subcats" msg
subcat.options[0] =
new Option("-- no subcategories yet --","0");
return; // and we are done
}
// yes, so get the appropriate subcategories:
subcat.options[0] =
new Option("-- choose a subcategory below --","0");

// what category number was selected?
var catnum = sel.options[sel.selectedIndex].value;
var cursc = 0;
for ( ix = 0; ix < subcatInfo.length; ++ix )
{
// looking for all subcat's with the requested category number
var subcatObj = subcatInfo[ix];
if ( subcatObj.CatNum == catnum )
{
subcat.options[++cursc] =
new Option( subcatObj.SubcatName, subcatObj.SubcatNum );
}
}
}
// done with JS code
</script>
</head>
<body>

<form Name="DemoForm">
What kind of products are you interested in?<br/><br/>

First select a category and then, when the list of subcategories
appears, select a subcategory:<br/>

<select Name="CategorySelect" onchange="doCategory(this);">
<option Value="NONE">-- choose a category below--</option>
<option Value='1007'>Breads</option>
<option Value='1006'>Candies</option>
<option Value='1001'>Canned goods</option>
<option Value='1002'>Cereal</option>
<option Value='1004'>Drinks</option>
<option Value='1005'>Snack foods</option>
<option Value='1003'>Staples</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="SubcategorySelect" >
<option Value="0">-- no subcategories yet --
</select>
</form>
</body>
</html>

Is that what you mean?

Building the list of subcategory options in that way is easy from PHP or JSP or ASP code.

Thanks and it's what I mean, but I tried another way I found it more easy for me, but it have a problem in adding the values of every item as I couldn't find how to add it, so hope you or any other one could help in this:


function swicthcity()
{
selmenu = document.getElementById('countries');
var theselected = selmenu.options[selmenu.selectedIndex].value;


if(theselected == "Egypt")
{
var CITY = new Array( "Cairo" , "Alexandria" , "Sharm" , "Luxor" );
var zonesl = CITY.length;
var i=0;
while(i<zonesl)
{
document.getElementById('cities').options[i] = new Option(CITY[i]);
i++;
}
}

if(theselected == "Germany")
{
var CITY = new Array( "Munchen" , "Dortmund" , "Berlin" , "Koln" );
var zonesl = CITY.length;
var i=0;
while(i<zonesl)
{
document.getElementById('cities').options[i] = new Option(CITY[i]);
i++;
}
}


}

Old Pedant
09-04-2010, 01:53 AM
That's really BAD code. Ugly.

In that ugly code, you have to create a special list for each choice in the first <select>.

Is that what you mean by "adding the values of every item"? Yes, it's really hard with that ugly code.

My code is EASY to get all the values for all the options. If your server side code is PHP or ASP or JSP, it's especially easy. If you are not using server side code, then yes, mine could be simplified a bit.

Old Pedant
09-04-2010, 01:56 AM
Davey: Tell you what. You try *MY* code so you can understand what this person wanted. And what most people want when they talk about "dependent selects" or "multi-level selects" or "dependent drop downs" or, as this person wrote, "second menu items should be determined based on the selected item of the first menu".

It's one of *THE* most common requests in this forum. I would guess it is asked for at least 3 or 4 times a week, on average.

DaveyErwin
09-04-2010, 02:01 AM
Here is the original question .


I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:


<select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>


but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?

Old Pedant
09-04-2010, 02:17 AM
Here, maybe this is what you want:


<html>
<head>
<script type="text/javascript">

var countries = [
{ country: "Egypt", cities: ["Cairo","Alexandria","Sharm","Luxor"] },
{ country: "Germany", cities: ["Munchen","Dortmund","Berlin","Koln"] },
{ country: "USA", cities: ["New York","Chicago","Dallas","Seattle","Los Angeles"] },
{ country: "Japan", cities: ["Tokyo","Osaka","Kyoto","Sapporo"] }
];


function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}

var chosen = selCountry.options[selCountry.selectedIndex].text;
for ( var c = 0; c < countries.length; ++c )
{
if ( countries[c].country == chosen )
{
var cList = countries[c].cities;
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
}
</script>
</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option>choose country</option>
<option>Egypt</option>
<option>Germany</option>
<option>Japan</option>
<option>USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City">
<option>choose city</option>
</select>
</form>
</body>
</html>

Old Pedant
09-04-2010, 02:20 AM
Exactly. And you utterly missed the important part:

I have two select menus, the second menu items should be determined based on the selected item of the first menu, ...


Of course he/she can NOT use document.write to do that. If you use document.write any time after the page is fully loaded, it WIPES OUT all existing HTML, including all script.

DaveyErwin
09-04-2010, 02:40 AM
Exactly. And you utterly missed the important part:

I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:


<select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>


but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?



Of course he/she can NOT use document.write to do that. If you use document.write any time after the page is fully loaded, it WIPES OUT all existing HTML, including all script.

Oh , yeah now i get it, he says "I have"
so of course the page must already be
loaded because he has.

But here is the part that confused me

and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:but when I put them in a function they wrote as a text not a menu item,

and no complaints about wiped out page so it looked to me as if he were accomplishing
this task with the one problem of leaving off tags so it came out text.
Of course now i understand that "it came out text" means text as opposed
to html.

Old Pedant
09-04-2010, 02:41 AM
And here is yet another way to do it (slight variation on last way):


<html>
<head>
<script type="text/javascript">

var countries = [ ]
countries["Egypt"] = ["Cairo","Alexandria","Sharm","Luxor"];
countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln"];
countries["USA"] = ["New York","Chicago","Dallas","Seattle","Los Angeles"];
countries["Japan"] = ["Tokyo","Osaka","Kyoto","Sapporo"];

function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}

var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option>choose country</option>
<option>Egypt</option>
<option>Germany</option>
<option>Japan</option>
<option>USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City">
<option>choose city</option>
</select>
</form>
</body>
</html>

DaveyErwin
09-04-2010, 06:36 AM
And here is yet another way to do it (slight variation on last way):


<html>
<head>
<script type="text/javascript">

var countries = [ ]
countries["Egypt"] = ["Cairo","Alexandria","Sharm","Luxor"];
countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln"];
countries["USA"] = ["New York","Chicago","Dallas","Seattle","Los Angeles"];
countries["Japan"] = ["Tokyo","Osaka","Kyoto","Sapporo"];

function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}

var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option>choose country</option>
<option>Egypt</option>
<option>Germany</option>
<option>Japan</option>
<option>USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City">
<option>choose city</option>
</select>
</form>
</body>
</html>



<html>
<head>
<script type="text/javascript">
var switchCountry=(
function(){
this.args=arguments;
return function(obj){
var A = obj.selectedIndex;
var B = obj.parentNode.City.options;
if(A--){
B.length = (args[A]).length +1;
for(var i = args[A].length;i--;){
B[i+1].text = (args[A])[i];
}
}else{
B.length = 1
}
}
})(
["Cairo","Alexandria","Sharm","Luxor"] ,
["Munchen","Dortmund","Berlin","Koln"] ,
["Tokyo","Osaka","Kyoto","Sapporo"] ,
["New York","Chicago","Dallas","Seattle","Los Angeles"]
)
</script>
</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option>choose country</option>
<option>Egypt</option>
<option>Germany</option>
<option>Japan</option>
<option>USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City">
<option>choose city</option>
</select>
</form>
</body>
</html>__________________
"Old age and cunning win out over youth a

I attempted to optimize your code but
found it to be very well written , all I
could manage was to move things around a bit
maybe discuss this code as it is based on your own

abduraooft
09-04-2010, 07:37 AM
Thanks and I searched for it but still didn't find a good example without using Ajax.
I get http://bonrouge.com/~chain_select_js, which doesn't use any ajax!

Google also gives http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

abduraooft
09-04-2010, 07:39 AM
Oh , yeah now i get it, he says "I have"
so of course the page must already be
loaded because he has.

But here is the part that confused me
and a bad "rep" for my first reply? :)

Sciliano
09-04-2010, 12:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var cities =[];
cities["CA"] = ["Sacramento","San Diego","San Francisco","Los Angeles"];
cities["OH"] = ["Cleveland","Akron","Canton","Cincinnati","Columbus"];
cities["PA"] = ["Philadelphia","Pittsburgh","Harrisburgh"];

function fillSelect(nValue,nList){

var nOption = "";
nList.options.length = 1;
var curr = cities[nValue];
for (each in curr)
{
nOption = document.createElement("option");
nOption.appendChild(document.createTextNode(curr[each]));
nOption.value = curr[each];
nList.appendChild(nOption);
}
}

function init(){

var nForm = document.forms[0];
nForm['states'].onchange = function()
{
fillSelect(this.value,this.form['cities']);
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
form {width: 330px; margin: auto;}
fieldset {width: 330px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt ;color: #00008bb; background-color: #87ceeb;
padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
label {font-family: times; font-size: 12pt; color: #00008b; padding: 5px;}
select {font-family: tahoma; font-size: 10pt; width: 125px ;margin-left: 27px;}
.submitBtn {width: 75px; background-color: #fff8dc; border: solid 1px #000000;
font-family: arial; font-size: 10pt; font-weight: bold;
cursor: pointer; display: block; margin-left: auto;
margin-right: auto; margin-top: 8px; margin-bottom: 5px; padding: 0px;}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Form</legend>
<select name="states">
<option value="">Select Your State</option>
<option value="CA">California</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
</select>
<select name="cities">
<option value="">Select Your City</option>
</select>
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>

Mido™
09-04-2010, 07:19 PM
I get http://bonrouge.com/~chain_select_js, which doesn't use any ajax!

Google also gives http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

Yes I saw them, thanks again.:)

Mido™
09-04-2010, 07:22 PM
And here is yet another way to do it (slight variation on last way):


<html>
<head>
<script type="text/javascript">

var countries = [ ]
countries["Egypt"] = ["Cairo","Alexandria","Sharm","Luxor"];
countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln"];
countries["USA"] = ["New York","Chicago","Dallas","Seattle","Los Angeles"];
countries["Japan"] = ["Tokyo","Osaka","Kyoto","Sapporo"];

function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}

var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option>choose country</option>
<option>Egypt</option>
<option>Germany</option>
<option>Japan</option>
<option>USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City">
<option>choose city</option>
</select>
</form>
</body>
</html>


Thanks and this code make me find the solution of adding the value, I know that my way is look need more time and typing than yours, but I just will add only 6 countries for this I didn't think to try to use your way unless if my way didn't fix adding values.
and in any way all roads lead to Rome.:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum