2 Drop Down Menus - One's Selection Changes 2nd's Options

KyleVA · 05-28-2009, 12:59 AM

I'm trying to make this dynamic because the option values are going to change on the fly.

Using the example provided via the code.. If you choose 'Selection 1' in the first drop down menu - the second drop down will only display options that have an "A" contained within the value. If you choose 'Selection 2' in the first drop down - the second drop down will only display options that have a "B" contained within the value.

I'm new to Javascript programming and I'm just having trouble figuring out a way to perform an operation to check each of the values within the second drop-down's options.

I'm sure it's very simple - but I'm new to this so I appreciate any help at all.

Code:

<html>
<head>
<script type="text/javascript">
function assignSelection() {
 elem = document.getElementById("selection");
 elem.disabled = false;
}
function loadPage()
{
	//var string = "0005B"
	//if (string.indexOf("B")!=-1) {}
}
function onSelect() {
}
</script>
</head>
<body onLoad="loadPage()">
<form name="oForm">
  <p>
    <select name="main" onchange="assignSelection()">
      <option value="Select"> SELECT ONE </option>
      <option value="SelectA"> Selection 1 </option>
      <option value="SelectB"> Selection 2 </option>
    </select>
  </p>
  <p>
    <select name="products" id="selection" onChange="onSelect()" disabled>
      <option value="Select"> Select One </option>
      <option value="1000A" name="attr"> Selection 1 - 1000 </option>
      <option value="1001A" name="attr"> Selection 1 - 1001 </option>
      <option value="1002A" name="attr"> Selection 1 - 1002 </option>
      <option value="1000B" name="attr"> Selection 2 - 1000 </option>
      <option value="1001B" name="attr"> Selection 2 - 1001 </option>
      <option value="1002B"> Selection 2 - 1002 </option>
    </select>
  </p>
</form>
</body>
</html>

Edit: Ugh, still not much luck figuring it out. Damn.

KyleVA · 05-28-2009, 04:05 AM

Code:

<html>
<head>
<script type="text/javascript">

function assignSelection() {
	elem = document.getElementById("selection");
 	elem.disabled = false;
	var attrs = document.oForm.products.length;
	for(i = 1; i < attrs; i++){
	document.oForm.products.options[i].style.display = '';	
	}
	var metal = document.oForm.main.selectedIndex;
	if (metal == 1) {	
	var attrs = document.oForm.products.length;
	for(i = 1; i < attrs; i++){
	var pvalue = document.oForm.products.options[i].value;
	if (pvalue.indexOf("B")!=-1) {
	document.oForm.products.options[i].style.display = 'none';
	}
	}
	elem = document.getElementById("selection");
 	elem.selectedIndex = 0;
	}
	else if (metal == 2) {
	var attrs = document.oForm.products.length;
	for(i = 1; i < attrs; i++){
	var pvalue = document.oForm.products.options[i].value;
	if (pvalue.indexOf("A")!=-1) {
	document.oForm.products.options[i].style.display = 'none';
	}
	}
	elem = document.getElementById("selection");
 	elem.selectedIndex = 0;
	}
	else {
	elem = document.getElementById("selection");
 	elem.disabled = true;
 	elem.selectedIndex = 0;
	}
	
}

</script>
</head>

<body onLoad="loadPage()">
<form name="oForm">
<p>
  <select name="main" onchange="assignSelection()">
    <option value="Select"> SELECT ONE </option>
    <option value="SelectA"> Selection 1 </option>
    <option value="SelectB"> Selection 2 </option>
  </select>
</p>
<p>
<select name="products" id="selection" disabled>
<option value="selected" selected> --SELECT ONE-- </option>
<option value="1000A"> Selection 1 - 1000 </option>
<option value="1001A"> Selection 1 - 1001 </option>
<option value="1002A"> Selection 1 - 1002 </option>
<option value="1000B"> Selection 2 - 1000 </option>
<option value="1001B"> Selection 2 - 1001 </option>
<option value="1002B"> Selection 2 - 1002 </option>
</select>
</p>
</form>
</body>
</html>

Edit: GOT IT!! Ha, my first Javascript that I've done all on my own. If anyone here would look at it and tell me if it's proper and would work effectively on a live web site I would really appreciate it.. Haha, I'm stoked.

KyleVA · 05-29-2009, 04:13 AM

Can anyone help me get the following code working in IE? :X

Code:

<html>
<head>
<script type="text/javascript">

function assignSelection() {
	var elem = document.getElementById("selection");
	var selectionWidth = elem.offsetWidth;
	elem.style.width = selectionWidth;
	var attrs = elem.length;
	for (i = 1; i < attrs; i++){
	elem.options[i].style.display = '';	
 	elem.disabled = false;
	}
	var metal = document.option_form.main.selectedIndex;
	if (metal == 1) {	
	for (i = 1; i < attrs; i++){
	var pvalue = elem.options[i].value;
	if (pvalue.indexOf("B")!=-1) {
	elem.options[i].style.display = 'none';
	}
	}
	}
	else if (metal == 2) {
	for (i = 1; i < attrs; i++){
	var pvalue = elem.options[i].value;
	if (pvalue.indexOf("A")>-1) {
	elem.options[i].style.display = 'none';
	}
	}
	}
	else {
 	elem.disabled = true;
	}
	if (metal == 2 || metal == 1 || metal == 0) {
 	elem.selectedIndex = 0;
	}
	}	
</script>
</head>

<body onload="getIDattr()">
<form name="option_form">
<p>
  <select name="main" onChange="assignSelection()" onfocus="setWidth()">
    <option value="Select"> SELECT ONE </option>
    <option value="SelectA"> Selection 1 </option>
    <option value="SelectB"> Selection 2 </option>
  </select>
</p>
<p>
<div>
<select id="selection" disabled>
<option value="" selected> --SELECT ONE-- </option>
<option value="1000A"> Selection 1 - 1000 </option>
<option value="1001A"> Selection 1 - 1001 </option>
<option value="1002A"> Selection 1 - 1002 </option>
<option value="1003A"> Selection 1 - 1003333333 </option>
<option value="1000B"> Selection 2 - 1000 </option>
<option value="1001B"> Selection 2 - 1001 </option>
<option value="1002B"> Selection 2 - 1002 </option>
<option value="1003B"> Selection 2 - 1003 </option>
<option value="1004B"> Selection 2 - 1004 </option>
</select>
</div></p>
</form>
</body>
</html>