How do I select/unselect item in listbox?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
voltrader
Forum Contributor
Posts: 223
Joined: Wed Jul 07, 2004 12:44 pm
Location: SF Bay Area

How do I select/unselect item in listbox?

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post 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
Post Reply