Bind click to select options but not to the select element itself

Question

Is there a way to bind a click event to the select options and not to the select box itself?

The change event also won't work for me because when I first click the box I'm not able to select the first option (since it's already selected by default), and I really need to be able to also select the first option.

Is there any way to get around this, either binding a click or a change event?

Answer 1

You could either:

a) Add a 'Please select...' option as the default item in the select.

b) Run the 'selection changed' code on page load to pick up the default, something like this.

<select>
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

Current Value: <span></span>

and

// call the changed function on document ready
// to get the 'default' value
$(function() {
    selectionChanged();
});

// hook up the change event of the select box
$('select').change(selectionChanged);

// event handler for the change event
function selectionChanged(e) {
    $('span').html($('select').val());
}