javascript - Capture events in <select> list - Stack Overflow

admin管理员组

文章数量:1318335

I would like to know how to capture events within the dropdown list when a user click on a "select" dropdown list. I would like for example to intercept events when different elements of list are on focus.

I tried to tie event listeners to the option elements of the list but they do not capture anything. See sample code here:

    <select>
        <option onfocus="alert('Hi there');">Foo</option>
        <option>Bar</option>
    </select>

I would like to know how to capture events within the dropdown list when a user click on a "select" dropdown list. I would like for example to intercept events when different elements of list are on focus.

I tried to tie event listeners to the option elements of the list but they do not capture anything. See sample code here:

    <select>
        <option onfocus="alert('Hi there');">Foo</option>
        <option>Bar</option>
    </select>

• javascript
• events
• dom-events
• html-select

Share Improve this question Follow edited Dec 29, 2020 at 11:50 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 1, 2013 at 17:39 RenaudRenaud 4,68088 gold badges4545 silver badges7474 bronze badges 5

• @dave283 and Kolink thanks for your answers. I was wondering if it was possible to access the dropdown list to register events directly to it, the same way you would on a popup menu. Registering onChange events will not trigger if you select the element that was already selected in the list. – Renaud Commented Feb 4, 2013 at 9:36
• Hi Reno, I don't really understand your question. What do you mean by selecting the same element that was already selected. What action is it that you want to trigger the alert? There has to be some kind of action to trigger an event. – dave823 Commented Feb 4, 2013 at 18:26
• Hi @dave823, in the example above, the specific use case is: I select Foo, then I click on the select item again (Foo is selected) and I select Foo again. The onChange event isn't triggered because the selected value didn't change. This is why I would like to register events directly in the dropdown list. Does that make sense? – Renaud Commented Feb 5, 2013 at 11:40
• 1 Hi Reno, it has been a while and you probably already solved this by now, but incase not, I have edited my answer below. I added an onfocus event to the dropdown which will unselect whatever is selected. By doing that, any item you select (even the same one) should cause the onchange event to fire. – dave823 Commented Feb 11, 2013 at 17:04
• Hi @dave823 this kind of works but it is not optimal. For example if you don't unclick the element between two selection, the blur event will not trigger. Also if you focus the item by accident, you might want to just click away and blur, but then you would lose your selection which may not be desirable. Thanks for your effort anyway, I haven't found a way to get into the dropdown list as of now so I accepter Kolink answer. Hopefully this will be possible some day... – Renaud Commented Feb 13, 2013 at 10:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can't, <select> is a replaced element and its children act only as data for it rather than actual child elements.

The best you can do is apply an onChange event to the <select> itself, then access this.options[this.selectedIndex] to do stuff.

You would have catch the onchange event, and then test to see what the value changed to, something like this:

Updated: notice the onfocus event I added.

For more ideas, check here: Is there an onSelect event or equivalent for HTML <select>?

<script type="text/javascript">

function myDDLOnChangeEvent()
{
    var selectedValue = document.getElementById('myDDL').value;
    if(selectedValue == 'Foo')
    {
        //alert('Hi there');
        //do stuff here - except for alerts
        //if you put an alert here, it will fire the onfocus event again..
        //  ..after you click 'ok' in the alert box
    }
}

</script>

<select id="myDDL" onchange="myDDLOnChangeEvent();" onfocus="this.selectedIndex = -1;">
    <option>Foo</option>
    <option>Bar</option>
</select>

本文标签： javascriptCapture events in ltselectgt listStack Overflow