Solved

dependent select menus

Posted on 2008-10-11
3
202 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

734 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