Page 1 of 1

How do I select/unselect item in listbox?

Posted: Tue Jul 20, 2004 2:32 pm
by voltrader
I have a listbox script that goes something like this:

<select name=services_listarray[] multiple size=7 class=text>
<option value="">None</option>
<option value="a">All</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Once any option is selected, it cannot be unselected by clicking on option again.

For example, I click "None", and it's highlighted. If I click it again, it stays highlighted.

How would I go about getting the option to be selected if unselected, and unselected if selected?

Posted: Tue Jul 20, 2004 2:36 pm
by feyd
I believe the .selected property is the one you want to access.. however.. this would have to be handled in an onchange handler within the element. Otherwise you won't be able to access it too easily with the name being an array control..

Posted: Tue Jul 20, 2004 2:51 pm
by pickle
Two options I think
1) If "None" is selected, set the "selected" property to false
2) Whenever something is selected, update another variable to it's value. If the clicked value matches the stored value, unselect everything. (IE: If someone clicks "All", store "All" in a form element called "curr_selected" (name doesn't matter). Then, when something is clicked, say "All" again, JS checks the value of the selected item - "All", agains "curr_selected". If they match, unselect everything.

I'm not sure if this is quite as easy as it sounds. Javascript seems easy enough to use but I've been burnt too many times by subtle nuances to have any faith in my ability to do anything with it.

Posted: Tue Jul 20, 2004 10:25 pm
by Vincent Puglia
hi,

I'm somewhat confused. Do you want to keep the original selection and then make it impossible for the user to change it? If so, the following will do it:

Code: Select all

<html>
<head>
<script type="text/javascript" language="javascript">
var selNdx = -1;
function keepit(oSel)
{
  var newNdx = oSel.selectedIndex;
  if (selNdx == -1)
    selNdx = newNdx;
  for (var i =0; i < oSel.length;i++)
       oSel.options[i].selected =  (i == selNdx) ? true : false;

}
</script>
<style type="text/css">
</style>
</head>
<body>
<form name="theForm">
<select name='services_listarray[]'  size=7 class=text onchange='keepit(this)'> 
<option value="">None</option> 
<option value="a">All</option> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 
</form>
</body>
</html>
Note: I changed the select tag from 'multiple' to 'select-one' type because it makes no sense to allow the user to select multiple items and then stop it.

Here is a different technique (which probably works only for version 5 browsers):

Code: Select all

<html>
<head>
<script type="text/javascript" language="javascript">
function disableit(oSel)
{
  oSel.disabled = true;
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form name="theForm">
<select name='services_listarray[]'  size=7 class=text onchange='disableit(this)'> 
<option value="">None</option> 
<option value="a">All</option> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 
</form>
</body>
</html>
Re accessing element names that contain '[]' : simply use the form collection object --

for (var i = 0; i < formObj.length; i++)
if (formObj.elements.name == 'services_listarray[]')

or:

formObj['services_listarray[] '].....



Vinny