asked on

Chained Select Drop Down Menu

Hi Guys,
I have two drop down list. I want to write a chained select where a option from dropdown list1 is chosen then its correspondent option from dropdown list2 should show up in dropdown list2.
Can some one direct me on how i would go about writting this in Javascript and asp.net.
Dropdown list 1
USA
UK

Drop down list 2
If UK then i want options London, Birmingham and Manchester to show up
If USA then i want Washington, New York and Los Angelas to show up.

If usa is chosen i dont want drop down list 2 to show any options of UK and vice versa.

Does any one know how i would go about writting the javascript function , arrays and variable for this programme.

Thanks

sajuks

//credit to netgroove
<html>
<head>
<script LANGUAGE="javaScript">
function populateSTATE(theSel){
zs = theSel.value;
var optState = theSel.form.state.options;
optState.length = 0;
if(State[theSel.value]){
for (var i=0; i<State[theSel.value].length; i++) {
optState[optState.length] = new Option (State[zs][i], State[zs][i], true, true);
}
}
theSel.form.state.selectedIndex = 0;
}
State = new Array();
State["uk"] = ["London","Manchester","Birmingham"];
State["us"] = [ "Washington" , "New York","Los Angelas" ];
</script>
</head>
<body>
<form name="contact">

<select NAME="country" onChange="populateSTATE(this);">
<option VALUE>- Select Country -</option>
<option VALUE="us">United States</option>
<option VALUE="uk">United Kingdom</option>
</select>

<select NAME="state">
<option VALUE><< Select Country First</option>
</select>
</form>
</body>
</html>

//https://www.experts-exchange.com/questions/20816361/Country-Array.html

azcn2503

I've noticed that adding the option element to a select causes some off effects in Mozilla and Netscape (they do not like innerText to be added), the inner text becomes invisible :S

archrajan

see this example
<html>
<head>
</head>
<body>
<script>
function getcars()
{
document.getElementById('cars').length = null
if(document.getElementById('makers').options[document.getElementById('makers').selectedIndex].value == "a")
{
var a = document.getElementById('cars').length

var opt = new Option('FORD','FORD','FORD')
var opt1 = new Option('GM','GM','GM')
document.getElementById('cars').options[0] = opt;
document.getElementById('cars').options[1] = opt1;
}
if(document.getElementById('makers').options[document.getElementById('makers').selectedIndex].value == "g")
{
var a = document.getElementById('cars').length

var opt = new Option('MERCEDES','MERCEDES','MERCEDES')

document.getElementById('cars').options[0] = opt;

}
if(document.getElementById('makers').options[document.getElementById('makers').selectedIndex].value == "j")
{
var a = document.getElementById('cars').length

var opt = new Option('TOYOTA','TOYOTA','TOYOTA')
var opt1 = new Option('HONDA','HONDA','HONDA')
var opt2 = new Option('MITSIBISHI','MITSIBISHI','MITSIBISHI')
document.getElementById('cars').options[0] = opt;
document.getElementById('cars').options[1] = opt1;
document.getElementById('cars').options[2] = opt2;
}
}
</SCRIPT>
<body onload = "getcars()">

<form>

<select id="makers" name="makers" onchange="getcars()">
<option value="a">American</option>
<option value="g">German</option>
<option value="j">Japanese</option>
</select>

<select id="cars" name="cars">

</select>

</form>

</body>
</html>

archrajan

For ur example
<html>
<head>
</head>
<body>
<script>
function getcars()
{
document.getElementById('cars').length = null
if(document.getElementById('makers').options[document.getElementById('makers').selectedIndex].value == "a")
{
var a = document.getElementById('cars').length

var opt = new Option('NEW YORK','NEW YORK','NEW YORK')
var opt1 = new Option('WASHINGTON','WASHINGTON','WASHINGTON')
var opt2 = new Option('LOS ANGELES','LOS ANGELES','LOS ANGELES')
document.getElementById('cars').options[0] = opt;
document.getElementById('cars').options[1] = opt1;
document.getElementById('cars').options[2] = opt2;
}
if(document.getElementById('makers').options[document.getElementById('makers').selectedIndex].value == "g")
{
var a = document.getElementById('cars').length

var opt = new Option('LONDON','LONDON','LONDON')
var opt1 = new Option('BRIMINGHAM','BRIMINGHAM','BRIMINGHAM')
var opt2 = new Option('MANCHESTER','MANCHESTER','MANCHESTER')

document.getElementById('cars').options[0] = opt;
document.getElementById('cars').options[1] = opt1;
document.getElementById('cars').options[2] = opt2;

}
}
</SCRIPT>
<body onload = "getcars()">

<form>

<select id="makers" name="makers" onchange="getcars()">
<option value="a">USA</option>
<option value="g">UK</option>

</select>

<select id="cars" name="cars">

</select>

</form>

</body>
</html>

choudhmh

ASKER

Guys,
Theres only one problem my data on the first drop down list is pouplated from the database. It retrives more then one country and using the above script say i chose USA, nothing on the second drop down list comes up. Is there any other way of doing this without declaring the option - <option VALUE>- Select Country -</option>
<option VALUE="us">United States</option>
<option VALUE="uk">United Kingdom</option>
as this will be automatically retrived from the database.

I dont want to put array of contries as the country will be related tro users feedback thats retrived from the databse.

Thanks
Mac

archrajan

check this
<html>
<head>
</head>
<body>
<script>
function getcountry()
{
document.getElementById('country').length = null
if(document.getElementById('countries').options[document.getElementById('countries').selectedIndex].value == "usa")
{
var a = document.getElementById('country').length

var opt = new Option('NEW YORK','NEW YORK','NEW YORK')
var opt1 = new Option('WASHINGTON','WASHINGTON','WASHINGTON')
var opt2 = new Option('LOS ANGELES','LOS ANGELES','LOS ANGELES')
document.getElementById('country').options[0] = opt;
document.getElementById('country').options[1] = opt1;
document.getElementById('country').options[2] = opt2;
}
if(document.getElementById('countries').options[document.getElementById('countries').selectedIndex].value == "uk")
{
var a = document.getElementById('country').length

var opt = new Option('LONDON','LONDON','LONDON')
var opt1 = new Option('BRIMINGHAM','BRIMINGHAM','BRIMINGHAM')
var opt2 = new Option('MANCHESTER','MANCHESTER','MANCHESTER')

document.getElementById('country').options[0] = opt;
document.getElementById('country').options[1] = opt1;
document.getElementById('country').options[2] = opt2;

}
}
</SCRIPT>
<body onload = "getcountry()">

<form>

<select id="countries" name="countries" onchange="getcountry()">
<option value="usa">USA</option>
<option value="uk">UK</option>

</select>

<select id="country" name="country">

</select>

</form>

</body>
</html>

choudhmh

ASKER

Hi archrajan

Still it does not function, i think its got to do with the
<select id="countries" name="countries" onchange="getcountry()">
<option value="usa">USA</option>
<option value="uk">UK</option>

</select>

As on my one its like this:

<asp:DropDownList id="txtcurrentsupplier" DataValueField="TelephoneSupplierID" DataTextField="TelephoneSupplierName" Runat="server" onchange="getcountry()">
<asp:ListItem Value="usa">USA</asp:ListItem>
<asp:ListItem Value="uk">UK</asp:ListItem>
</asp:DropDownList></DIV>

As you can see the value on this fields are being retrived from the database depending on the details. What ways do you think i need to change the javascript so it automaticaly recognis ethe frist drop down value and according to that it inserts its correspondent value on drop down2. I know arrays would be involve, but how will i make sure these arrays are called when a value from drop down 1 is selected.

archrajan

did u change all the id's in ur code .
can u post ur full code please?

archrajan

country and countries

country is the id for the second drop down box
and
countries is the id for the first drop down box

choudhmh

ASKER

archrajan

and here
<asp:DropDownList id="TelephoneSupplierName" Runat="server" DataValueField="TelephoneCallPlanName" DataTextField="TelephoneCallPlanName" onchange="getcountry()"></asp:DropDownList>

change the id to "TelephoneSupplierName1" or something and same in the script

right now in the script u have
both id's of the 2 drop down boxes same...

choudhmh

ASKER

i cant do that as this is being retrived from the database. Also dropdown2 id is TelephoneSupplierName. my backend code uses this to retrive the user specified values from the database.

choudhmh

ASKER

tried your suggestion, drop down 1 does not have any vlaue in the list. Also runtime error is thrown at the javascript function

archrajan

ok use this id TelephoneSupplierName for dropdown 2
and what is the id u are using for drop down 1?

that error is because the id is not referenced properly

choudhmh

ASKER

i've tried your suggestion drop downlist one TelephoneSupplierName and dropdown list2 TelephoneSupplierName 1. I've been told another way of doing this. The suppliers are dependent on regions so say uk is region 2 and usa is region 1. the first drop down list retrivew suppliers to drop down list1 according to the region submitted by user when they register. Is there anyway i could ask the Javacsript to use region to identify supplier. then using the supplier region this will show the supplier name from where drop2 will list the variables of that supplier. Drop down 2 needs to be an array of list, like present.

archrajan

so u will have 3 drop down menus?

if so u can handle it...
but u have to use unique id's

choudhmh

ASKER

no theres only one two drop down. the only problem i'm facing at present is with the first one. the values are retrived from the databse according to regions. drop down two is need to be in cvhained selection where if BT is retrived according to user specification then evry city realted to BT needs to be displayed in drop2. Drop2 has no linkage with any database.

archrajan

yeah thats what the code now does...
though the options are coming from the drop down...u need to know the values before hand to do any manipulations with it..
give the id's of both ur dropdowns now and i can show u an example..

choudhmh

ASKER

<asp:DropDownList id="txtcurrentsupplier" DataValueField="TelephoneSupplierID" DataTextField="TelephoneSupplierName" Runat="server" onchange="getcountry()">
<asp:ListItem Value="BT"></asp:ListItem>
<asp:ListItem Value="NT"></asp:ListItem>
</asp:DropDownList></DIV>

<DIV>
<asp:Label ID="Plan" Runat="server" Text="Your Current Call plan">
<asp:DropDownList id="TelephoneSupplierName" Runat="server" DataValueField="TelephoneCallPlanName" DataTextField="TelephoneCallPlanName" onchange="getcountry()"></asp:DropDownList></asp:Label>
</DIV>

archrajan

check this out now
<html>
<head>
</head>
<body>
<script>
function getTelephoneSupplierName()
{
document.getElementById('TelephoneSupplierName').length = null
if(document.getElementById('txtcurrentsupplier').options[document.getElementById('txtcurrentsupplier').selectedIndex].value == "usa")
{
var a = document.getElementById('TelephoneSupplierName').length

var opt = new Option('NEW YORK','NEW YORK','NEW YORK')
var opt1 = new Option('WASHINGTON','WASHINGTON','WASHINGTON')
var opt2 = new Option('LOS ANGELES','LOS ANGELES','LOS ANGELES')
document.getElementById('TelephoneSupplierName').options[0] = opt;
document.getElementById('TelephoneSupplierName').options[1] = opt1;
document.getElementById('TelephoneSupplierName').options[2] = opt2;
}
if(document.getElementById('txtcurrentsupplier').options[document.getElementById('txtcurrentsupplier').selectedIndex].value == "uk")
{
var a = document.getElementById('TelephoneSupplierName').length

var opt = new Option('LONDON','LONDON','LONDON')
var opt1 = new Option('BRIMINGHAM','BRIMINGHAM','BRIMINGHAM')
var opt2 = new Option('MANCHESTER','MANCHESTER','MANCHESTER')

document.getElementById('TelephoneSupplierName').options[0] = opt;
document.getElementById('TelephoneSupplierName').options[1] = opt1;
document.getElementById('TelephoneSupplierName').options[2] = opt2;

}
}
</SCRIPT>
<body onload = "getTelephoneSupplierName()">

<form>

<select id="txtcurrentsupplier" name="txtcurrentsupplier" onchange="getTelephoneSupplierName()">
<option value="usa">USA</option>
<option value="uk">UK</option>

</select>

<select id="TelephoneSupplierName" name="TelephoneSupplierName">

</select>

</form>

</body>
</html>

choudhmh

ASKER

This is more or less what i'm looking for, but the main problem is on select id txtcurrentsupplier i cant declare any options as these would be automatically retrived from the databse accroding to the region selected by the user they are in. How would i pass that main hurdle. I cant declare any options.

choudhmh

ASKER

How would i write a script within the function where say if region id passed on is 1 from page on show only BT on dropdown list1, if region id passed on from previous page is 2 then only show ntl as the option on drop down list1.

This is how i'm passin gthe region id:
Response.Redirect("Homepage.aspx?rid=" & TelephoneRegionID & "&tid=" & tid)

archrajan

u create a hidden variable
<input type = "hidden" name = "regionvariable" value = "<%=TelephoneRegionID%>">
and pass that region id to this hidden field.

THEN ACCESS THE REGION ID from the hidden field.

document.formname.regionvariable.value

a = document.formname.regionvariable.value

oh, now do u want to populate the dropdown 1 also via javascript?????

choudhmh

ASKER

I think it would be best if this is not poulated via JS. So it is automattically called from the database using the hidden field

ASKER CERTIFIED SOLUTION

archrajan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial