dependent select menus

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>
jen_jen_jenAsked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
All Courses

From novice to tech pro — start learning today.