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?
How do I select/unselect item in listbox?
Moderator: General Moderators
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.
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.
- Vincent Puglia
- Forum Commoner
- Posts: 67
- Joined: Thu Sep 04, 2003 4:20 pm
- Location: where the World once stood
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:
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):
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
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>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>for (var i = 0; i < formObj.length; i++)
if (formObj.elements.name == 'services_listarray[]')
or:
formObj['services_listarray[] '].....
Vinny