Use the change
event instead:
$('.social-option select').on('change', function () {
alert('bla');
});
From the documentation:
The change event is sent to an element when its value changes. This
event is limited to elements, boxes and
elements. For select boxes, checkboxes, and radio buttons, the event
is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.
IIRC, the click
event works for <option>
s in Firefox, however does not work in Chrome. The best, most supported event is change
.
To get the value of the option selected, simply use .val()
as you would with any other input:
$('.social-option select').on('change', function () {
alert($(this).val());
});