Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

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.
0
topicomha
Asked:
topicomha
  • 6
  • 4
  • 3
  • +4
1 Solution
 
avnerCommented:
I can't remember who initially wrote this code, but you can use this to begin :

<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "Verzekeraar|Tussenpersoon|Bank-verzekeraar";
m_arr[1] = "Rijksoverheid|Provinciale overheid";
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].split("|");
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[0]['firstselect'], 'otherselect')">
<form>
<select onChange="sh(this, 'otherselect')" name='firstselect'>
<option>Financieel-economisch</option>
<option>Overheid</option>
<option>Politiek</option>
<option>Media</option>
</select>

<select name="otherselect">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>

0
 
vijayneemaCommented:
Is it drop down menus or combo ??
0
 
avnerCommented:
There is no combo in HTML.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
vijayneemaCommented:
anver,

oh .... i mean drop down list
0
 
vijayneemaCommented:
drop down list is what we create using <select> tag in HTML
0
 
avnerCommented:
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.
0
 
vijayneemaCommented:
So my question is again there.

Is it drop down list or drop down menu created using JavaScript ??
0
 
topicomhaAuthor Commented:
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.
0
 
topicomhaAuthor Commented:
Not to make it harder or anything but the select boxes are being created dynamically, too.
0
 
webwomanCommented:
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...
0
 
topicomhaAuthor Commented:
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.
0
 
Slava_KCommented:
<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).value;    
     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("OPTION");
          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>
0
 
topicomhaAuthor Commented:
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

0
 
webwomanCommented:
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.  
0
 
topicomhaAuthor Commented:
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.
0
 
topicomhaAuthor Commented:
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.

0
 
ahosangCommented:
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
0
 
moduloCommented:
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 4
  • 3
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now