topicomha
asked on
smart drop down menu
I have multiple drop down menus and I want the options in the other drop down menus to change when an option is selected in the first drop down.
i.e.
The first drop down menu has options 1,2,3,4 and when the first drop down menu is on 3 then the other ones only have 1,2,4 then the third would have 1,2 if the second had the value of 4.
Thanks for the help.
i.e.
The first drop down menu has options 1,2,3,4 and when the first drop down menu is on 3 then the other ones only have 1,2,4 then the third would have 1,2 if the second had the value of 4.
Thanks for the help.
Is it drop down menus or combo ??
There is no combo in HTML.
anver,
oh .... i mean drop down list
oh .... i mean drop down list
drop down list is what we create using <select> tag in HTML
Hmm, in HTML there is only Drop Down list.
Select box is a drop-down with height property set to something.
So basically it's the same objects.
Select box is a drop-down with height property set to something.
So basically it's the same objects.
So my question is again there.
Is it drop down list or drop down menu created using JavaScript ??
Is it drop down list or drop down menu created using JavaScript ??
ASKER
I want to use a few select inputs boxes. Using ASP and JavaScript I want to load an array with a recordset then use the same array for the select options in all the boxes minus the values in the other select boxes.
ASKER
Not to make it harder or anything but the select boxes are being created dynamically, too.
Then you're going to have to reload the page. If everything is created dynamically, and if ALL the options can change,it makes sense to just reload it all. Easier, too.
Unless this is going to get major, major,MAJOR traffic...
Unless this is going to get major, major,MAJOR traffic...
ASKER
Ok, well I’m new to the game. So any input on how I could do this would be appreciated Here is the site: http://nzerinc.com/david/lessons/site/makeccodesform.asp
Here’s the process pick a session then it makes all the classes for the session. Then you fill in the teacher’s name but in stead of a text box to write the name I want a select box with the names of the teachers. But you can’t have one teacher teaching two classes at the same time. So I want the select box to remove the teacher as an option once they have been assigned to a class.
Here’s the process pick a session then it makes all the classes for the session. Then you fill in the teacher’s name but in stead of a text box to write the name I want a select box with the names of the teachers. But you can’t have one teacher teaching two classes at the same time. So I want the select box to remove the teacher as an option once they have been assigned to a class.
<HTML>
<BODY>
<SCRIPT LANGUAGE=javascript>
<!--
var ar1 = new Array("AA", "BB", "CC");
var ar2 = new Array("1", "2", "3");
var ar3 = new Array("A1", "B2", "C3");
function SetDDL(obj){
var curItem = obj(obj.selectedIndex).val
var curArr = eval("ar" + curItem);
rebuildDDL(curArr);
}
function rebuildDDL(oArr){
var otherDDL = window.ddlB;
otherDDL.innerHTML = "";
for(var i=0; i<oArr.length; i++){
var oSelect = document.createElement("OP
oSelect.value = oArr[i];
oSelect.text = oArr[i];
ddlB.add(oSelect);
}
}
//-->
</SCRIPT>
<SELECT name=ddlA id=ddlA onchange="SetDDL(this);" size=4>
<OPTION value=1> A</OPTION>
<OPTION value=2> B</OPTION>
<OPTION value=3> C</OPTION>
</SELECT>
<SELECT id=ddlB name=ddlB size=4>
<OPTION></OPTION>
</SELECT>
</BODY>
</HTML>
<BODY>
<SCRIPT LANGUAGE=javascript>
<!--
var ar1 = new Array("AA", "BB", "CC");
var ar2 = new Array("1", "2", "3");
var ar3 = new Array("A1", "B2", "C3");
function SetDDL(obj){
var curItem = obj(obj.selectedIndex).val
var curArr = eval("ar" + curItem);
rebuildDDL(curArr);
}
function rebuildDDL(oArr){
var otherDDL = window.ddlB;
otherDDL.innerHTML = "";
for(var i=0; i<oArr.length; i++){
var oSelect = document.createElement("OP
oSelect.value = oArr[i];
oSelect.text = oArr[i];
ddlB.add(oSelect);
}
}
//-->
</SCRIPT>
<SELECT name=ddlA id=ddlA onchange="SetDDL(this);" size=4>
<OPTION value=1> A</OPTION>
<OPTION value=2> B</OPTION>
<OPTION value=3> C</OPTION>
</SELECT>
<SELECT id=ddlB name=ddlB size=4>
<OPTION></OPTION>
</SELECT>
</BODY>
</HTML>
ASKER
That is nice but not quite what I wanted. I need the same select menu repeated with the only differance being the options that are already used wound not be options in the other select menus.
i.e.
___
select 1 |a | options a, b, c, d
___
select 2 |c | options b, c, d without a
___
select 3 |b | options b, d without a, c
___
select 1 |d | options d without a, b, c
i.e.
___
select 1 |a | options a, b, c, d
___
select 2 |c | options b, c, d without a
___
select 3 |b | options b, d without a, c
___
select 1 |d | options d without a, b, c
You have to reload the page. Actually, for something like this frames make your life a LOT easier.
Top frame -- the initial dropdown, pulled from the database. At this point, frame 2 (and 3, if needed) are blank (blank html file with just html/head/body tags). Select a value from the dropdown, the form calls whatever you need to load in frame 2, and passes the selected value so you can pull only the info you need. It also resets frame 3. NOTE: the top frame NEVER reloads, it's not necessary.
Frame 2 -- when you select/submit a choice from the first frame, it's passed to the second frame and loads the appropriate values, pulling them from the database and dynamically constructing the dropdown (and reseting frame 3). There's also a hidden field with the value selected from the FIRST frame. Selecting a value here loads the appropriate document in frame 3, passing that value and the value from frame 1 to frame 3.
Note well -- once you have frame 1 loaded, you never reload it. If you want to choose something else from frame 2, only frame 3 reloads -- not the other 2 frames.
It can work well, and very fast, since you only pull a limited amount of data from the database each time, and only load one or 2 pages - and if it's 2 pages, the second one is blank.
Top frame -- the initial dropdown, pulled from the database. At this point, frame 2 (and 3, if needed) are blank (blank html file with just html/head/body tags). Select a value from the dropdown, the form calls whatever you need to load in frame 2, and passes the selected value so you can pull only the info you need. It also resets frame 3. NOTE: the top frame NEVER reloads, it's not necessary.
Frame 2 -- when you select/submit a choice from the first frame, it's passed to the second frame and loads the appropriate values, pulling them from the database and dynamically constructing the dropdown (and reseting frame 3). There's also a hidden field with the value selected from the FIRST frame. Selecting a value here loads the appropriate document in frame 3, passing that value and the value from frame 1 to frame 3.
Note well -- once you have frame 1 loaded, you never reload it. If you want to choose something else from frame 2, only frame 3 reloads -- not the other 2 frames.
It can work well, and very fast, since you only pull a limited amount of data from the database each time, and only load one or 2 pages - and if it's 2 pages, the second one is blank.
ASKER
Webwomen, I like the frames idea but I want to keep that as s back up plan. I found some pieces of code that I’m trying to adapt to my needs.
Here’s what I’m thinking about right now.
<SCRIPT LANGUAGE="JavaScript">
<!--
function getValue(callingElement) {
alert ('you changed this to' & callingElement.value);
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" VALUE="Have you checked our latest tools?" SIZE=30 onchange="getValue(this)">
</FORM>
That takes care of getting the value to an event handler. Obviously I would be using a select menu and the alert wouldn’t be there.
Now the next one is only a guess so bear with me.
<SCRIPT>
<!--
var optionNo = 0;
function addNewOption() {
optionNo += 1;
oNewOption = new Option();
oNewOption.text = "Option " + optionNo;
oSelect.add(oNewOption, 1);
}
// -->
</SCRIPT>
now this one adds opitions to a select and I’m woundering if you or anyone for that matter knows how to delete options. I think if I had that last little bit I could make it work.
Thanks to everyone that helps.
Here’s what I’m thinking about right now.
<SCRIPT LANGUAGE="JavaScript">
<!--
function getValue(callingElement) {
alert ('you changed this to' & callingElement.value);
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" VALUE="Have you checked our latest tools?" SIZE=30 onchange="getValue(this)">
</FORM>
That takes care of getting the value to an event handler. Obviously I would be using a select menu and the alert wouldn’t be there.
Now the next one is only a guess so bear with me.
<SCRIPT>
<!--
var optionNo = 0;
function addNewOption() {
optionNo += 1;
oNewOption = new Option();
oNewOption.text = "Option " + optionNo;
oSelect.add(oNewOption, 1);
}
// -->
</SCRIPT>
now this one adds opitions to a select and I’m woundering if you or anyone for that matter knows how to delete options. I think if I had that last little bit I could make it work.
Thanks to everyone that helps.
ASKER
Sorry
Webwomen, I like the frames idea but I want to keep that as s back up plan. I found some pieces of code that I’m trying to adapt to my needs.
Here’s what I’m thinking about right now.
<SCRIPT LANGUAGE="JavaScript">
<!--
function getValue(callingElement) {
alert ('you changed this to' & callingElement.value);
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" VALUE="Have you checked our latest tools?" SIZE=30 onchange="getValue(this)">
</FORM>
That takes care of getting the value to an event handler. Obviously I would be using a select menu and the alert wouldn’t be there.
Now the next one is only a guess so bear with me.
<SCRIPT>
<!--
var optionNo = 0;
function addNewOption() {
optionNo += 1;
oNewOption = new Option();
oNewOption.text = "Option " + optionNo;
oSelect.add(oNewOption, 1);
}
// -->
</SCRIPT>
Now this one adds options to a select and I’m wondering if you or anyone for that matter knows how to delete options. I think if I had that last little bit I could make it work.
Thanks to everyone that helps.
Webwomen, I like the frames idea but I want to keep that as s back up plan. I found some pieces of code that I’m trying to adapt to my needs.
Here’s what I’m thinking about right now.
<SCRIPT LANGUAGE="JavaScript">
<!--
function getValue(callingElement) {
alert ('you changed this to' & callingElement.value);
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" VALUE="Have you checked our latest tools?" SIZE=30 onchange="getValue(this)">
</FORM>
That takes care of getting the value to an event handler. Obviously I would be using a select menu and the alert wouldn’t be there.
Now the next one is only a guess so bear with me.
<SCRIPT>
<!--
var optionNo = 0;
function addNewOption() {
optionNo += 1;
oNewOption = new Option();
oNewOption.text = "Option " + optionNo;
oSelect.add(oNewOption, 1);
}
// -->
</SCRIPT>
Now this one adds options to a select and I’m wondering if you or anyone for that matter knows how to delete options. I think if I had that last little bit I could make it work.
Thanks to everyone that helps.
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:
PAQ
Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
ahosang
EE Cleanup Volunteer
I will leave a recommendation in the Cleanup topic area that this question is:
PAQ
Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
ahosang
EE Cleanup Volunteer
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "Verzekeraar|Tussenpersoon
m_arr[1] = "Rijksoverheid|Provinciale
m_arr[2] = "Landelijke politiek|provinciale politiek"
m_arr[3] = "Landelijk dagblad|blah";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
if(document.all) other_obj.options.length = 0
for(i=0;i<s.length;i++)
{
if(document.all) other_obj[i] = new Option();
other_obj[i].value = s[i]
other_obj[i].text= s[i];
}
}
</script>
</head>
<body onload="sh(document.forms[
<form>
<select onChange="sh(this, 'otherselect')" name='firstselect'>
<option>Financieel-economi
<option>Overheid</option>
<option>Politiek</option>
<option>Media</option>
</select>
<select name="otherselect">
<option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>