Smart Option Lists in JavaScript

**Kyrnt** · 01-19-2005, 10:21 AM

Ok, I have a situation in which I have two option lists. Both are multi-select, but there is a twist. The values in List2 are dependent on values in List1.

HTML Code:

[b]List1[/b]
<select name="List1" multiple="multiple" size="3">
    <option value="Category1">Category1</option>
    <option value="Category2">Category2</option>
    <option value="Category3">Category3</option>
</select>

[b]List2[/b]
<select name="List2" multiple="multiple" size="5">
    <option value="Value1">Value1</option>
    <option value="Value2">Value2</option>
    <option value="Value3">Value3</option>
    <option value="Value4">Value4</option>
    <option value="Value5">Value5</option>
</select>

Let's say that Category1 has valid values of Value1 and Value5.
Category2 has valid values of Value1, Value2, Value3 and Value4.
Category3 has valid values of Value3, Value4 and Value5.

What I want is JavaScript which will smartly enable and disable the values in List2 as the categories in List1 are selected. Keep in mind that both lists are multi-select.

Thanks in advance.....

**Rufo** · 01-19-2005, 01:30 PM

You'll want an array to hold the valid options for each category.
I suggest something along the lines of:

Code:

$valid[category_number][value_number] = true|false;

From your examples:

Code:

$valid[1][1] = true;
$valid[1][2] = false;
$valid[1][3] = false;
$valid[1][4] = false;
$valid[1][5] = true;

$valid[2][1] = true;
$valid[2][2] = true;
$valid[2][3] = true;
$valid[2][4] = true;
$valid[2][5] = false;

$valid[3][1] = false;
$valid[3][2] = false;
$valid[3][3] = true;
$valid[3][4] = true;
$valid[3][5] = true;

Then, when the user selects a category, a loop iterates through each value, checking whether it is valid or not:

Code:

function disablesome($category_number) {
   $noofvalues = $valid[$category_number].length;
   for($v=1;$v<=$noofvalues;$v++) {
      if($valid[$category_number][$v]) {
         // enable the appropriate value
         // I can't remember how; you should probably use getElementById()
      }
      else {
         // disable the appropriate value
      }
   }
}

This should be an OK basis to work on.

Rufo.

**Kyrnt** · 01-25-2005, 08:04 AM

Rufo,

Thanks for your help -- unfortunately, your logic would give the list only the values representative by the last array within valid. But thanks -- and it turns out that the question was moot to begin with.

I have found that it is not possible to disable individual options within a select control, only the entire list itself. So while that makes my task a little more difficult, it does effectively answer the question.

I wanted to share in case anyone else runs into this problem.

**Christopher** · 01-25-2005, 02:49 PM

Are you still looking for a method? The only way I see is to create arrays of possible Select2 options for each option in Select1. Then when Select1 is updated (options selected and/or deselected), use Javascript to add only available options to Select2. So not disabling options, but simply only providing the available options.

**Kyrnt** · 01-25-2005, 03:29 PM

Chroder,

Thanks -- what I decided to do was attach an onChange event to the first list which submits the form, recalculates list2 to display the appropriate values.

At the core, I think I'm still an advocate of server-centricity.

Thanks!

**Phaedrus** · 03:06 AM

What you could do is build several different sub-select dropdowns and hide them in different DIVs. Then you just hide or show the relevant DIV in response to the onChange event.

That's kind of a kludge, but it should work.

also, I found this, which I think is what you're trying to do: http://www.quirksmode.org/js/options.html

**Phaedrus** · 03-05-2005, 03:40 AM

I rolled my own simple version of what I was talking about with the DIVs:

HTML Code:

<html>
<head>
	<title>Test</title>
	<script language="javascript">
	var arr = new Array();
	function getDivs()
	{
		el = document.getElementById("ddMain");
		length = el.length;
		for(i=0;i<length;i++)
		{
			arr[i] = el.options[i].value;
		}
	}	
	function hideAll(a)
	{
		for(i=0;i<arr.length;i++)
		{
			document.getElementById(arr[i]).style.display = 'none';
		}
	}
	function showMe(me)
	{
		document.getElementById(me).style.display = '';
	}
	</script>
</head>
<body onload='getDivs();hideAll(arr);showMe(document.getElementById("ddMain").value)'>

<div id="main">
	<select id="ddMain" onChange="hideAll();showMe(this.options[this.selectedIndex].value);">
		<option value="Microsoft">Microsoft</option>
		<option value="Open Source">Open Source</option>
	</select> 
</div>
<div id="Microsoft">
	<select id="ddMS">
		<option value="Windows">Windows</option>
		<option value="IIS">IIS</option>
		<option value="Internet Explorer">Internet Explorer</option>
		<option value="ASP">ASP</option>
	</select> 
</div>
<div id="Open Source">
	<select id="ddOS">
		<option value="Linux">Linux</option>
		<option value="Apache">Apache</option>
		<option value="FireFox">FireFox</option>
		<option value="PHP">PHP</option>
	</select> 
</div>

</body>
</html>

**Christopher** · 03-05-2005, 11:19 AM

It wouldn't be entire groups of options that would be unselectable, just specific options. So to work the way you say, he'd need hundreds of hidden divs with hundreds of different option combinations.

It would work in a different situation, but not here.

**Phaedrus** · 01:09 PM

Oh, okay. In his example he only had two menus, so I thought he was only dealing with two. I think that link I provided is exactly what he's looking for.