-
dropdown boxes
Hi,
I am trying to have a dropdown box where if I select something in one box,
it will update the other dropdown box accordingly. For example, the first
drop down box contains different states. If I select CA, the other drop
down will have choices like LA, Sacramento, but if I select Nevada, it would
have Las Vegas, REno etc. I am drawing the states from a database and there
is a relationship between the states and city table. How can this be done?
Thanks in advance.
Matt
-
Re: dropdown boxes
Just some ideas (though I haven't done this myself):
You should be able to use Events and javascript...perhaps onChange...or
onSelect.
"Matt" <mthead28@hotmail.com> wrote in message
news:3a896022$1@news.devx.com...
>
> Hi,
>
> I am trying to have a dropdown box where if I select something in one box,
> it will update the other dropdown box accordingly. For example, the first
> drop down box contains different states. If I select CA, the other drop
> down will have choices like LA, Sacramento, but if I select Nevada, it
would
> have Las Vegas, REno etc. I am drawing the states from a database and
there
> is a relationship between the states and city table. How can this be
done?
>
> Thanks in advance.
>
> Matt
>
-
Re: dropdown boxes
I had to create a form for folks to use to submit a trouble ticket. There
was different hardware, different software, and other misc configurations.
Try this:
******** START Javascript ********
// This function Checks the TOOL TYPE and sets the configuration options.
function Check_B(jolApply)
{
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "F5X") {
document.Email_Form.p_Hardware_Config.options[1].value = "Patmax";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard Patmax";
document.Email_Form.p_Hardware_Config.options[2].value = "Cognex_5400";
document.Email_Form.p_Hardware_Config.options[2].text = "Cognex 5400 (downgrade)";
document.Email_Form.p_Hardware_Config.options[3].value = "Not_Tangiers";
document.Email_Form.p_Hardware_Config.options[3].text = "Tangiers NOT Installed";
document.Email_Form.p_Hardware_Config.options[4].value = "SWE_Stress_Testing";
document.Email_Form.p_Hardware_Config.options[4].text = "SWE Stress Testing
(upgrade)";
document.Email_Form.p_Hardware_Config.options[5].value = "";
document.Email_Form.p_Hardware_Config.options[5].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "Summit
Version 2.50.19";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "F5") {
document.Email_Form.p_Hardware_Config.options[1].value = "Cognex_5400";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard Cognex
5400";
document.Email_Form.p_Hardware_Config.options[2].value = "Patmax";
document.Email_Form.p_Hardware_Config.options[2].text = "Patmax (upgrade)";
document.Email_Form.p_Hardware_Config.options[3].value = "Not_Tangiers";
document.Email_Form.p_Hardware_Config.options[3].text = "Tangiers NOT Installed";
document.Email_Form.p_Hardware_Config.options[4].value = "SWE_Stress_Testing";
document.Email_Form.p_Hardware_Config.options[4].text = "SWE Stress Testing
(upgrade)";
document.Email_Form.p_Hardware_Config.options[5].value = "";
document.Email_Form.p_Hardware_Config.options[5].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "Summit
Version 2.40.16";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "UV12XX") {
document.Email_Form.p_Hardware_Config.options[1].value = "Cognex_5400";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard Cognex
5400";
document.Email_Form.p_Hardware_Config.options[2].value = "Patmax";
document.Email_Form.p_Hardware_Config.options[2].text = "Patmax (upgrade)";
document.Email_Form.p_Hardware_Config.options[3].value = "Not_Tangiers";
document.Email_Form.p_Hardware_Config.options[3].text = "Tangiers NOT Installed";
document.Email_Form.p_Hardware_Config.options[4].value = "SWE_Stress_Testing";
document.Email_Form.p_Hardware_Config.options[4].text = "SWE Stress Testing
(upgrade)";
document.Email_Form.p_Hardware_Config.options[5].value = "";
document.Email_Form.p_Hardware_Config.options[5].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "Summit
Version 2.40.16";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "UV10XX") {
document.Email_Form.p_Hardware_Config.options[1].value = "Cognex_5400";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard Cognex
5400";
document.Email_Form.p_Hardware_Config.options[2].value = "Patmax";
document.Email_Form.p_Hardware_Config.options[2].text = "Patmax (upgrade)";
document.Email_Form.p_Hardware_Config.options[3].value = "Not_Tangiers";
document.Email_Form.p_Hardware_Config.options[3].text = "Tangiers NOT Installed";
document.Email_Form.p_Hardware_Config.options[4].value = "SWE_Stress_Testing";
document.Email_Form.p_Hardware_Config.options[4].text = "SWE Stress Testing
(upgrade)";
document.Email_Form.p_Hardware_Config.options[5].value = "";
document.Email_Form.p_Hardware_Config.options[5].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "Summit
Version 2.40.16";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "RS100") {
document.Email_Form.p_Hardware_Config.options[1].value = "Standard";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard RS100";
document.Email_Form.p_Hardware_Config.options[2].value = "";
document.Email_Form.p_Hardware_Config.options[2].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "RS100
Software Version 1.4";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "RS75") {
document.Email_Form.p_Hardware_Config.options[1].value = "Standard";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard RS75";
document.Email_Form.p_Hardware_Config.options[2].value = "";
document.Email_Form.p_Hardware_Config.options[2].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "StatTrax
Software Version 6.71";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "Quantox") {
document.Email_Form.p_Hardware_Config.options[1].value = "Standard";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard Quantox";
document.Email_Form.p_Hardware_Config.options[2].value = "";
document.Email_Form.p_Hardware_Config.options[2].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "Quantox
Software Version 1.0";
return false;
}
if (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
== "HRP") {
document.Email_Form.p_Hardware_Config.options[1].value = "Standard";
document.Email_Form.p_Hardware_Config.options[1].text = "Standard HRP";
document.Email_Form.p_Hardware_Config.options[2].value = "";
document.Email_Form.p_Hardware_Config.options[2].text = "";
document.Email_Form.p_Software_Config.options[1].value = "GEM";
document.Email_Form.p_Software_Config.options[1].text = "GEM Software Package
ONLY";
document.Email_Form.p_Software_Config.options[2].value = "SECS_II";
document.Email_Form.p_Software_Config.options[2].text = "Enhanced SECS II
Package ONLY";
document.Email_Form.p_Software_Config.options[3].value = "GEM_and_Gamma";
document.Email_Form.p_Software_Config.options[3].text = "GEM with Gamma
Curve Package";
document.Email_Form.p_Software_Config.options[4].value = "SECS_II_and_Gamma";
document.Email_Form.p_Software_Config.options[4].text = "Enhanced SECS II
with Gamma Curve Package";
document.Email_Form.p_Software_Config.options[5].value = "Other";
document.Email_Form.p_Software_Config.options[5].text = "Other";
document.Email_Form.p_Software_Config.options[6].value = "";
document.Email_Form.p_Software_Config.options[6].text = "";
document.Email_Form.p_Software_Config.disabled = false;
document.Email_Form.Software_Version_and_Additional_Notes.value = "HRP Software
Version 1.0";
return false;
}
// else (document.Email_Form.p_Tool_Type.options[document.Email_Form.p_Tool_Type.selectedIndex].value
!= "SL") {
}
********* END Javascript *********
********* START HTML (with omissions) *********
<TD COLSPAN=1>
<SELECT NAME="p_Tool_Type" onChange = "Check_B(this.jolApply)" CLASS=docText
STYLE="WIDTH:100%" SIZE=1>
<option value="SL" selected>** Tool Not Selected **
<OPTION VALUE="F5X">ASET F5X
<OPTION VALUE="F5">ASET F5
<OPTION VALUE="UV12XX">UV12xx
<OPTION VALUE="UV10XX">UV10xx
<OPTION VALUE="RS100">RS100
<OPTION VALUE="RS75">RS75
<OPTION VALUE="Quantox">Quantox
<OPTION VALUE="HRP">HRP
</SELECT>
<p>
<SELECT NAME="Handler_Type" CLASS=docText STYLE="WIDTH:100%" SIZE=1>
<option value="SL" selected>-- Select a Handler --
<OPTION VALUE="Dual_Open">Dual Open
<OPTION VALUE="Single_Open">Single Open
<OPTION VALUE="Dual_SMIF">Dual SMIF
<OPTION VALUE="Single_SMIF">Single SMIF
<OPTION VALUE="Other">Other/Unknown
</SELECT>
</TD>
<TR>
<td class="headingRq">
Hardware Configuration:
</TD>
<TD COLSPAN=3>
<SELECT NAME="p_Hardware_Config" CLASS=docText STYLE="WIDTH:100%" SIZE=1>
<option value="SL" selected>-- Select a hardware configuration --
<option value= "SL">Please Select a Tool First
<option value= "">
<option value= "">
<option value= "">
<option value= "">
<option value= "">
</SELECT>
</TD>
</TR>
<TR>
<td class="headingRq">
Software Configuration:
</TD>
<TD COLSPAN=3>
<SELECT NAME="p_Software_Config" CLASS=docText STYLE="WIDTH:100%" SIZE=1>
<option value="SL" selected>-- Select a software configuration --
<option value= "SL">Please Select a Tool First
<option value= "">
<option value= "">
<option value= "">
<option value= "">
<option value= "">
</SELECT>
</TD>
</TR>
<td COLSPAN="3" class="textArea">
<textarea STYLE="WIDTH:100%" CLASS="docText" NAME="Software_Version_and_Additional_Notes"
ROWS="4" COLS="70"></textarea><br>
</td>
********* END HTML *********
<anthony> wrote:
>Just some ideas (though I haven't done this myself):
>
>You should be able to use Events and javascript...perhaps onChange...or
>onSelect.
>
>
>"Matt" <mthead28@hotmail.com> wrote in message
>news:3a896022$1@news.devx.com...
>>
>> Hi,
>>
>> I am trying to have a dropdown box where if I select something in one
box,
>> it will update the other dropdown box accordingly. For example, the first
>> drop down box contains different states. If I select CA, the other drop
>> down will have choices like LA, Sacramento, but if I select Nevada, it
>would
>> have Las Vegas, REno etc. I am drawing the states from a database and
>there
>> is a relationship between the states and city table. How can this be
>done?
>>
>> Thanks in advance.
>>
>> Matt
>>
>
>
-
Re: dropdown boxes
You have to use a combination of Javascript on client side and ASP on the
server side to acheive this behaviour.
Here is the sample code to perform the stuff which you want to do.
To be able to use it create a access database with 2 tables, called State
and City.
State Table contains the columns StateID(PK) and State
City Table contains the columns StateID(FK) and City
Fill these table with some related information.
Create a DSN called "Region" and then run the code in an ASP page.
<%
Dim connString, rsState, rsCity, sql
Dim StateID
connString = "Provider=MSDASQL.1;Persist Security Info=False;Data Source=Region"
sql = "SELECT * FROM State"
Set rsState = Server.Createobject("ADODB.Recordset")
rsState.open sql, connString
'Check to see if the Request object has the StateID
StateID = Cint(Request("StateID"))
if StateID <> "" then
sql = "SELECT * FROM City WHERE StateID = " & StateID
Set rsCity = Server.Createobject("ADODB.Recordset")
rsCity.open sql, connString
End if
%>
<html>
<SCRIPT LANGUAGE="JavaScript">
function loadCity(myForm) {
var StateID = myForm.cboState.value;
document.location.href = "ListBox.asp?StateID="+StateID;
}
</SCRIPT>
<head>
<title>Test List Boxes</title>
</head>
<body>
<form method="POST" action="">
<p>Choose State<select size="1" name="cboState" onChange="loadCity(this.form)">
<option value="">Select State</option>
<%
Do While Not rsState.eof
%>
<option value="<%=rsState("StateID")%>"><%=rsState("State")%></option>
<%
rsState.MoveNext
Loop
rsState.Close
%>
</select></p>
<p>Choose City <select size="1" name="cboCity">
<%
if StateID <> "" then
Do While Not rsCity.eof
%>
<option value="<%=rsCity("City")%>"><%=rsCity("City")%></option>
<%
rsCity.MoveNext
Loop
rsCity.Close
End if
%>
</select></p>
</form>
</body>
</html>
Hope it helps, if you have any question let me know.
Have fun
Shantanu
"Matt" <mthead28@hotmail.com> wrote:
>
>Hi,
>
>I am trying to have a dropdown box where if I select something in one box,
>it will update the other dropdown box accordingly. For example, the first
>drop down box contains different states. If I select CA, the other drop
>down will have choices like LA, Sacramento, but if I select Nevada, it would
>have Las Vegas, REno etc. I am drawing the states from a database and there
>is a relationship between the states and city table. How can this be done?
>
>Thanks in advance.
>
>Matt
>
-
Re: dropdown boxes
Matt,
Try remote scripting.. This way you don't have to ever leave your page.
It simulates a client-server relationship. You can use the onchange event
on your State dropdown box, to trigger a remote script in a server-side ASP
that will read the City table for that state and return the cities to the
onchange events javascript. You can then populate the city dropdown box
with the results(you may have to parse them if you return a string from the
ASP. This eliminates the need to post the form, and then redirect back to
your page. check msdn.microsoft.com/sorkshop/languages/clinic/scripting041299.asp
for a good discussion on remote scripting.. There are many others out there
too.
Good Luck..!
"Matt" <mthead28@hotmail.com> wrote:
>
>Hi,
>
>I am trying to have a dropdown box where if I select something in one box,
>it will update the other dropdown box accordingly. For example, the first
>drop down box contains different states. If I select CA, the other drop
>down will have choices like LA, Sacramento, but if I select Nevada, it would
>have Las Vegas, REno etc. I am drawing the states from a database and there
>is a relationship between the states and city table. How can this be done?
>
>Thanks in advance.
>
>Matt
>
-
Re: dropdown boxes
<html>
<SCRIPT LANGUAGE="Javascript">
<!--// Browser Detection
var Array1 = new Array("('Select country','',true,true)",
"('Ethiopia','11')",
"('Somalia','12')",
"('South Africa','13')",
"('Other','14')");
function abc() {
while (Array1.length < inForm.grup.options.length) {
inForm.grup.options[(inForm.grup.options.length - 1)] = null;
}
for (var i=0; i < Array1.length; i++) {
eval("inForm.grup.options[i]=" + "new Option" + Array1[i]);
}
}
//-->
</script>
<body topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0 bgcolor=white>
<form name="inForm">
<center>
<table width=360 height=60 border=0 cellpadding=0 cellspacing=1
bgcolor=black>
<tr align=center>
<td bgcolor=#e99999>
<select name="tip" size=2 onchange="abc()">
<option selected value="1">Arzlar</option>
<option value="2">Talepler</option>
</select>
</td>
<td bgcolor=#9999e0 align=center>
<select name="grup" onchange="aaa()">
<option selected
value="0"> Lüffen bir grup
seçiniz </option>
<option value="2">Bilgisayar</option>
<option value="3">Mobilya</option>
<option value="4">Hizmet</option>
</select><br>
<select name="urun">
<option selected value="1"> Lüten
Ürün/Hizmet'lerden birini seçiniz </option>
<option value="2">Yazılım</option>
<option value="3">Donanım</option>
<option value="4">Yedek Parça</option>
</select>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Development Centers
-- Android Development Center
-- Cloud Development Project Center
-- HTML5 Development Center
-- Windows Mobile Development Center
|