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
Solved

dependent select menus

Posted on 2008-10-11
3
200 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Index on a Table 6 25
html Uncheck Checkbox 2 25
I thought I had multiple sliders on one page working properly . . . I don't. 10 16
Fix Form size HTML 16 15
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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

839 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