Solved

smart drop down menu

Posted on 2002-06-05
18
201 Views
Last Modified: 2012-08-13
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
Comment
Question by:topicomha
  • 6
  • 4
  • 3
  • +4
18 Comments
 
LVL 14

Expert Comment

by:avner
ID: 7058435
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
 
LVL 1

Expert Comment

by:vijayneema
ID: 7058533
Is it drop down menus or combo ??
0
 
LVL 14

Expert Comment

by:avner
ID: 7058535
There is no combo in HTML.
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7058540
anver,

oh .... i mean drop down list
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7058541
drop down list is what we create using <select> tag in HTML
0
 
LVL 14

Expert Comment

by:avner
ID: 7058548
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
 
LVL 1

Expert Comment

by:vijayneema
ID: 7058573
So my question is again there.

Is it drop down list or drop down menu created using JavaScript ??
0
 

Author Comment

by:topicomha
ID: 7058620
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
 

Author Comment

by:topicomha
ID: 7058631
Not to make it harder or anything but the select boxes are being created dynamically, too.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 19

Expert Comment

by:webwoman
ID: 7059077
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
 

Author Comment

by:topicomha
ID: 7059791
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
 
LVL 2

Expert Comment

by:Slava_K
ID: 7060536
<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
 

Author Comment

by:topicomha
ID: 7060947
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
 
LVL 19

Expert Comment

by:webwoman
ID: 7061084
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
 

Author Comment

by:topicomha
ID: 7079286
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
 

Author Comment

by:topicomha
ID: 7079293
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
 
LVL 12

Expert Comment

by:ahosang
ID: 8275973
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
 

Accepted Solution

by:
modulo earned 0 total points
ID: 8360590
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now