Geek Answers Handbook

Use the last button in several options

On the page, I have a selection box (several) with many options. Now I want to respond to the last click to display some data using ajax.

Since the "click" event in the option element does not work in IE, I am currently using the "change" event.

The problem is that the “value” attribute and selectedIndex point to the first selected item, even if I select other options following the first.

The only way to get the last selected option is to compare the set of selected parameters before and after the "change" event.

Is there another way?

+6
javascript html events select
source share
2 answers

The only way to get the most recently selected option is to compare the set of selected options before and after the "change" event.

Most likely, this is your best choice - that is, it will not report click events by individual parameters (it will indicate only clicks in the selection window).

If you really want to find out which option was pressed (when listening to clicks in the selection window itself), you can see the offsetY property of the event object (which will be the vertical shift of the mouse cursor relative to the top of the first option in the selection window - so that it includes scroll bar of the selection window) and divide it by your predefined option size (which will depend on the font size in the selection field).

But obviously this will not help you when the user selects parameters from the keyboard.

+2
source share

The following code is not perfect. I think that this does not work correctly in IE6, but it is good in IE7-8, Firefox, Safari (Win), Opera and Chrome. It records only the last click to select a value, so as not to select the value that was last selected without selecting another, still returns the last selected (now not selected) index. I will leave you to handle this if you need ...

 <html> <head> <title>Multiple selection indices attribute</title> <script type='text/JavaScript'> function oc(a) {var o={};for (var i=0;i<a.length;i++) {o[a[i]]='';}; return o;}; function getIndices(ele) {if (!ele.prevSelected) {ele.prevSelected=new Array();} ele.selectedIndices=new Array(); while (ele.selectedIndex != -1) {ele.selectedIndices.push(ele.selectedIndex); if (ele.selectedIndex in oc(ele.prevSelected)) {null;} else {ele.newIndex = ele.selectedIndex;} ele.options[ele.selectedIndex].selected = false; }; for (var i=0;i<ele.selectedIndices.length;i++) {ele.options[ele.selectedIndices[i]].selected = true;}; ele.prevSelected=new Array(); if (ele.selectedIndices) {for (var i=0;i<ele.selectedIndices.length;i++) {ele.prevSelected.push(ele.selectedIndices[i]);} } }; function display(ele) {if (ele.newIndex) {alert('Last selection: '+ele.newIndex);}}; </script> </head> <body onload='getIndices(document.getElementById("mine"));'> <select multiple='multiple' id='mine' size='10' onclick='getIndices(this);'> <option value='A'> 0</option><option value='B'> 1</option> <option value='C'> 2</option><option value='D'> 3</option> <option value='E'> 4</option><option value='F'> 5</option> <option value='G'> 6</option><option value='H'> 7</option> <option value='I'> 8</option><option value='J'> 9</option> <option value='K'>10</option><option value='L'>11</option> <option value='M'>12</option><option value='N'>13</option> <option value='O'>14</option><option value='P'>15</option> </select> <input type='button' value='Show' onclick='display(document.getElementById("mine"));' /> </body>

+1
source share

More articles:


All Articles