selectedIndex with a multiple select

BillyKrow · May 20, 2003

I have a select tag as follows
<SELECT onClick="func(options[selectedIndex].id)" name="fieldName">

This will pass the id of whatever element is clicked on in the select box to the function. However if I use a multiple select then it will only give you the first item selected. Is there any way in a multiple select to tell the last option selected since you can select things in any order?

dwarfthrower · May 20, 2003

Your question is a little unclear, do you need to find the last option in the list which is selected, or the last option that the user seleceted in the list (which could be the first option in the list or the last)?

If you need to find out the last option that the user selected, this should get you going:
[tt]
<script>
//Array to hold the previously checked indexes
var prevCheckedIndexes = new Array()
//variable to hold the index that was last selected
var lastSelected
//function to check which indexes are currently selected
function doCheck(obj){
//Array holds all index values of options that are checked
var checkedIndexes = new Array();
var checkedIndex = lastSelected;
//loop through object adding their index if the option is checked
for(i=0; i < obj.options.length; i++)
{
if(obj.options.selected == true){
checkedIndexes[checkedIndexes.length] = i;
}
}
//Now that we have all currently selected indexes we need to
//compare against those that were previously selected
for(i=0; i < checkedIndexes.length; i++){
//for each value in checkedIndexes, see if it appears in
//prevCheckedIndexes
var matched = false;
if(prevCheckedIndexes.length == 0){
checkedIndex = checkedIndexes;
}
else{
for(j=0; j < prevCheckedIndexes.length; j++){
if(prevCheckedIndexes[j] == checkedIndexes){
matched = true;
}
}
if(matched == false){
checkedIndex = checkedIndexes;
}
}
}
prevCheckedIndexes = checkedIndexes;
lastSelected = checkedIndex;
alert('You selected: ' + lastSelected);
}
</script>
[/tt]

Then add the doCheck to the onChange event of your select tag like so:
[tt]<select onChange="doCheck(this)" name="list1" multiple>[/tt]

Of course, this script doesn't take into account de-selects, so it's possible to have a lastSelected value even if nothing is currently selected. I don't know enough about your particular situation to know if this is a good or bad thing.

xutopia · May 20, 2003

dwarf,

I think you forgot about the italicize option with TGML. don't forget to uncheck it!!!

Gary

http://www.xutopia.com

Haran
==========================

dwarfthrower · May 20, 2003

I didn't actually use italic. I need to learn not to use i as a subscript for my javascript arrays. [ i ] gets interpreted even though I had [ tt ] selected.

BillyKrow · May 20, 2003

I thought of this method but I hoped there would be an easier way. I started to write something similar and soon found out that this will not work do to the anomaly that on mutiple select boxes the property ojb.options.selected always turns out false even when something is selected. It works fine if you make it not multiple. Not sure where to go from here.

BillyKrow · May 20, 2003

Oops, I did the same thing you did. I meant:
ojb.options[ i ].selected

dwarfthrower · May 20, 2003

I get a positive return for

Code:

 obj.options[i].selected

using IE 5.5. Which browser are you using?

BillyKrow · May 21, 2003

I tried it running on 5.5 and am still getting unpredictable results. Try this below check the results.

<script>
function test (obj) {
for (i = 0; i < 2; i ++) {
alert(obj.options[ i ].selected);
}
}

</script>

<html>
<body>
<select onclick="test(this)" name="list" size="3" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>

theocraticmind · May 21, 2003

maybe I'm not understanding the problem correctly. but how about:

<select onchange="func(options[selectedIndex].id)" name="fieldName">

BillyKrow · May 21, 2003

Yes, this would work but on a 'multiple' select, selectedIndex only represents the first thing selected in the list. The issue is I want to update something every time a user clicks at item regardless of how many things are selected and there appears to be no easy way of knowing what they just clicked.

BillyKrow · May 22, 2003

If anyone cares, the problem I was having was do to using onclick rather than onchange. When I changed it to onchange the results were as expected. I than created a solution to my original problem based on dwarfthrowers solution but simplied. Working example:

<script>

var selectedItems = new Array ();
var lastSelectedItem;

for (i=0; i < 3; i++) {
selectedItems[ i ]=false;
}

function test (obj) {
for (i = 0; i < 3; i ++) {
if (obj.options[ i ].selected) {
if (!selectedItems[ i ]) {
selectedItems[ i ] = true;
lastSelectedItem = obj.options[ i ].id;
alert(lastSelectedItem);
}
}
else if (selectedItems[ i ]) {
selectedItems[ i ] = false;
}
}
}

</script>

<html>
<body>
<select onchange="test(this)" name="list" size="3" multiple>
<option id = "a" value="1">1</option>
<option id = "b" value="2">2</option>
<option id = "c" value="3">3</option>
</select>

</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

selectedIndex with a multiple select

BillyKrow

Programmer

dwarfthrower

Programmer

xutopia

Programmer

dwarfthrower

Programmer

BillyKrow

Programmer

BillyKrow

Programmer

dwarfthrower

Programmer

BillyKrow

Programmer

theocraticmind

Programmer

BillyKrow

Programmer

BillyKrow

Programmer

Similar threads

Part and Inventory Search

Sponsor