Jquery select click click handler

Question

Given:

<select id="mySelect"> <option>..</option> ... </select> 

Using the select identifier, how can I raise a click event for one of the parameters? I tried to bind the event directly to the select element, but this triggers the event whenever the select button is pressed (even if there are no parameters). Oh, and this is multi-choice (although I don’t think it matters).

Answer 1

You want a change event handler instead of a click.

 $('#mySelect').change(function(){ var value = $(this).val(); }); 

Answer 2

 $('#mySelect').on('change', function() { var value = $(this).val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <select id="mySelect"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> <option value='8'>8</option> </select> 

---

EXAMPLE

Answer 3

you can attach a focus event to select

 $('#select_id').focus(function() { console.log('Handler for .focus() called.'); }); 

Answer 4

The problem that I encountered when working with the change handler was that it worked every time I pressed the keys as I scrolled up and down <select> .

I wanted to get an event for each case when an option was pressed or when enter was pressed for the desired option. Here is how I did it:

 let blockChange = false; $element.keydown(function (e) { const keycode = (e.keyCode ? e.keyCode : e.which); // prevents select opening when enter is pressed if (keycode === 13) { e.preventDefault(); } // lets the change event know that these keypresses are to be ignored if([38, 40].indexOf(keycode) > -1){ blockChange = true; } }); $element.keyup(function(e) { const keycode = (e.keyCode ? e.keyCode : e.which); // handle enter press if(keycode === 13) { doSomething(); } }); $element.change(function(e) { // this effective handles the click only as preventDefault was used on enter if(!blockChange) { doSomething(); } blockChange = false; }); 

Answer 5

What I did in this situation was that I included OnClick elements in the options:

 <option onClick="something();">Option Name</option> 

Then just create a script function as follows:

 function something(){ alert("Hello"); } 

UPDATE: Unfortunately, I can not comment, so I am updating here
TrueBlueAussie explicitly jsfiddle has some problems, check here if it works or not: http://js.do/code/klm

Answer 6

One possible solution is to add a class to each option.

 <select name="export_type" id="export_type"> <option class="export_option" value="pdf">PDF</option> <option class="export_option" value="xlsx">Excel</option> <option class="export_option" value="docx">DocX</option> </select> 

and then use the click handler for this class

 $(document).ready(function () { $(".export_option").click(function (e) { //alert('click'); }); }); 

UPDATE: It looks like the code works in FF, IE, and Opera, but not in Chrome. Looking at the specifications http://www.w3.org/TR/html401/interact/forms.html#h-17.6 I would say that this is a bug in Chrome.