Improve company productivity with a Business Account.Sign Up

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

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>
0
jen_jen_jen
Asked:
jen_jen_jen
  • 2
1 Solution
 
b0lsc0ttIT 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now