Question

Here is my code:

$(".multiple").each(function() {
        $(this).bind("mousedown",function() {
            alert();
        });
    });

Here is the HTML it applies to:

<select>
<option value = "textbox">TextBox</option>
<option class = "multiple" value = "multiplechoice">MultipleChoice</option>
<option class = "multiple" value = "dropdown">DropDown</option>
</select>

I expect to see some sort of alert box, but it doesn’t seem to function. How can I fix this?

Answer 1

I’m not sure if you can bind events to option elements, as they are drawn by the browser and belong to the shadow DOM once rendered (I think). It doesn’t work for me at least in Chrome 17.

You could, however, do this…

$('select').change(function() {
    alert('Selected is ' + $(this).find('option:selected').text());
});

jsFiddle.