I have a list as shown below. I want to double click an item and then get the item index for the double clicked item. I am using Edge / Chrome. It appears to be working in Firefox.
To see the issue, in Edge, run the code snippet and double click an item. The alert shows -1. Now click an item, then double click that same item and the alert shows the index value.
<select id="jobs" multiple size="15" style=" width: 150px; height: 280px" ondblclick="move('jobright');">
<option value="1">Day 1 - Sunday</option>
<option value="2">Day 2 - Monday</option>
<option value="3">Day 3 - Tuesday</option>
<option value="4">Day 4 - Wednesday</option>
<option value="5">Day 5 - Thursday</option>
<option value="6">Day 6 - Friday</option>
<option value="7">Day 7 - Saturday</option>
</select>
<script>
function move(direction)
{
var source;
source = document.getElementById('jobs');
alert(source.selectedIndex);
}
</script>Your problem is that when you double click, first you select an item, then you unselect it, meaning that when the ondblclick event is triggered, you have nothing selected. source.selectedIndex returns -1 because you have just deselected the option. That's why the index is returned correctly when you start with the object selected, because this time the second click selects an item.
You can fix this problem by using the first argument of ondblclick, event. (See: Element: dblclick on MDN). The target property of the event will be the option HTML object, and you can use option.value to get its index. You can still use your direction argument by passing it as the second parameter.
<select id="jobs" multiple size="15" style=" width: 150px; height: 280px" ondblclick="move(event,'jobright');">
<option value="1">Day 1 - Sunday</option>
<option value="2">Day 2 - Monday</option>
<option value="3">Day 3 - Tuesday</option>
<option value="4">Day 4 - Wednesday</option>
<option value="5">Day 5 - Thursday</option>
<option value="6">Day 6 - Friday</option>
<option value="7">Day 7 - Saturday</option>
</select>
<script>
function move(event, direction) {
alert(event.target.value);
}
</script>