Why this handler doesnt works on Chrome?

Question

<select id="example">
    <option value="38">Marco</option>
    <option value="39">Hello</option>
</select>

$("#example> option").click(function () {
    alert("ciao");
});

clicking on a drop down item, the alert is not showed... IE and Firefox no problems..

Bind the click event to the select box to get it to work: http://jsfiddle.net/cSBET/1/ — Rob W, Apr 16 '12 at 19:57
Possible duplicate of http://stackoverflow.com/questions/7080213/jquery-click-event-not-working-on-option-element — Selvakumar Arumugam, Apr 16 '12 at 19:57

score 1 · Accepted Answer · answered Apr 16 '12 at 19:50

1

Use $('#example').change(...) - selecting/clicking an element will change the value of the selectbox so that should work.

answered Apr 16 '12 at 19:50

ThiefMaster

310,957
84
592
636

Clicking on same selected option will not trigger `change` event. – Selvakumar Arumugam Apr 16 '12 at 19:51

score 1 · Answer 2 · answered Apr 16 '12 at 19:51

1

Use the change function instead - it is perfectly suited for drop-downs.

$('#example').change(function() {
    alert('ciao');
});

answered Apr 16 '12 at 19:51

Jay Blanchard

34,243
16
77
119

score 1 · Answer 3 · answered Apr 16 '12 at 20:02

it seems as though .change() is the correct way to go about this on the <select> element.

note, though, that you'll have to retrieve the option manually once a change event has been fired on the <select> since this refers to a <select> element and not an <option> element.

you'll have to do this: var $selected = $(this).find(":selected");

$selected will contain the select option, or multiple selected options if multiple select is enabled.

just want to clarify that .change() is to be used on the <select> element and not the <option> elements.

Why this handler doesnt works on Chrome?

3 Answers3