jquery select option click handler

小开

You want the 'change' event handler, instead of 'click'.

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

小开

What I have done in this situation is that I put in the option elements OnClick event like this:

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

Then just create a script function like this:

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

UPDATE: Unfortunately I can't comment so I'm updating here
TrueBlueAussie apparently jsfiddle is having some issues, check here if it works or not: http://js.do/code/klm

小开

you can attach a focus event to select

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

小开

One possible solution is to add a class to every 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 specs http://www.w3.org/TR/html401/interact/forms.html#h-17.6 I would say it's a bug in Chrome.

小开

$('#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

小开

The problem that I had with the change handler was that it triggered on every keypress that I scrolled up and down the <select>.

I wanted to get the event for whenever an option was clicked or when enter was pressed on the desired option. This is how I ended up doing 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;


});

小开

its working for me

<select name="" id="select">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>


<script>
$("#select > option").on("click", function () {
alert(1)
})
</script>

小开

You can also try this to get previous value of select and the clicked value.

HTML

<select name="status">
<option value="confirmed">confirmed</option>
<option value="packed">packed</option>
<option value="shiped">shiped</option>
<option value="delivered">delivered</option>
</select>

script


var previous;


$("select[name=status]").focus(function () {
previous = this.value;
}).change(function() {
var next = $(this).val()
        

alert("previous: "+previous+ " and Next: "+ next)
        

previous = this.value;
});

小开

    <select name="data" id = 'cohort' class="form-control" style = "width:215px; margin-left:20px; margin-bottom:8px ; height:30px" >
<option value = 0>All</option>
<option value = 1>Diseases</option>
<option value = 2>Drugs</option>
<option value = 3>Procedures</option>
</select>

const element = document.getElementById("cohort");
const event = new MouseEvent("mousedown");
element.dispatchEvent(event);