Solved

dependent select menus

Posted on 2008-10-11
3
198 Views
Last Modified: 2012-06-21
I have two select menus:

Menua is "from" and menub is "to".  I want to filter the options based upon what the user selects *in either* menu.  So, if the user selects the "to" value first, the "from" menu should not present options that are higher than those in the "to" menu.  Conversely, if the user selects "from" first, the values in the "to" menu should not be lower than that set in the "from" menu.

Anyone know how to achieve this?


<select name="menua">
<option value="">Select price...</option>
<option value="5000">Less than 5000</option>
<option value="10000">$5,000 - $10,000</option>
<option value="20000">$10,000 - $20,000</option>
<option value="20000">More than $20,000</option>
</select>

<select>
<option value="">Select price...</option>
<option value="5000">Less than 5000</option>
<option value="10000">$5,000 - $10,000</option>
<option value="20000">$10,000 - $20,000</option>
<option value="20000">More than $20,000</option>
</select>
0
Comment
Question by:jen_jen_jen
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 22696390
I recommend you use a different method.  Also there are some errors or some ambiguity in the html and selects.
Make the user select the first one first.  It will simplify what your script needs to do.  There is logic to this to so I see no reason the user would be bothered by doing it this way.
The text in the options will cause some overlap so I fixed that in the code below.  Also two of the values duplicated, which won't work.
Let me know if you have a question about this or need something else for it.  This would be the usual way for it to be designed and done and the code should do all you need.
bol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<link href="/style.css" rel="stylesheet" type="text/css" />

<title>JS messing with options</title>

<script type="text/javascript">

var aOptions = [["1","Less than $5000"],["5000","$5,000 - $9,999"],["10000","$10,000 - $20,000"],["20000","More than $20,000"]]

function fillSelect(bMenu) {

	var selA = document.form1.menua;

	if (bMenu) { // first menu

		for (var i in aOptions) {

			var newOpt = document.createElement("option");

			newOpt.value = aOptions[i][0];

			newOpt.text = aOptions[i][1];

			try {

				selA.add(newOpt, null); // non IE, standards compliant

			} catch(e) {

				selA.add(newOpt); // IE

			}

		}

	} else {

		var start = selA.selectedIndex;

		var selB = document.form1.menub;

		while (selB.length > 1) {

			selB.remove(selB.length - 1);

		}

		for (var i = start; i<aOptions.length; i++) {

			var newOpt = document.createElement("option");

			newOpt.value = aOptions[i][0];

			newOpt.text = aOptions[i][1];

			try {

				selB.add(newOpt, null); // non IE, standards compliant

			} catch(e) {

				selB.add(newOpt); // IE

			}

		}

		selB.disabled = false;

	}

}

window.onload = function() { fillSelect(true) };

</script>

</head>
 

<body>

<h3>Messing with options using JS</h3>
 

<br /><br />

<form name="form1" action="" method="post">

Select 1:

<select name="menua" onchange="fillSelect(false);">

<option value=""></option>

</select>

<br />

Select 2:

<select name="menub" disabled="disabled">

<option value=""></option>

</select>

</form>
 

</body>

</html>

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22703483
Please explain the B grade.  If you still have a question on this and closed it accidentally then let me know.  I offered to provide more info and help and will be glad to if you need it.  With the details and complete solution I provided the comment, if it was an answer, does not deserve a B grade.  If the grade was a mistake or you have a question about grading on EE then let me know.  It is easy to correct or explain and I will be glad to do it.  Please respond though because the grade does not seem to fit, especially when you never posted a response.
bol
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

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…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

706 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

18 Experts available now in Live!

Get 1:1 Help Now