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!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

selectedIndex with a multiple select

Status
Not open for further replies.

BillyKrow

Programmer
Aug 27, 2001
67
US
I have a select tag as follows
<SELECT onClick=&quot;func(options[selectedIndex].id)&quot; name=&quot;fieldName&quot;>

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?
 
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=&quot;doCheck(this)&quot; name=&quot;list1&quot; 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.
 
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.
 
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.
 
Oops, I did the same thing you did. I meant:
ojb.options[ i ].selected
 
I get a positive return for
Code:
 obj.options[i].selected
using IE 5.5. Which browser are you using?
 
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=&quot;test(this)&quot; name=&quot;list&quot; size=&quot;3&quot; multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
 
maybe I'm not understanding the problem correctly. but how about:

<select onchange=&quot;func(options[selectedIndex].id)&quot; name=&quot;fieldName&quot;>
 
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.
 
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=&quot;test(this)&quot; name=&quot;list&quot; size=&quot;3&quot; multiple>
<option id = &quot;a&quot; value=&quot;1&quot;>1</option>
<option id = &quot;b&quot; value=&quot;2&quot;>2</option>
<option id = &quot;c&quot; value=&quot;3&quot;>3</option>
</select>

</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top