Click event on select option element in chrome

Question

I\'m having a problem in Chrome with the following:

var items = $(\"option\", obj);  

items.each(function(){

    $(this).click(function(){

           


        

Answer 1

The easy way to change the select, and update it is this.

// BY id
$('#select_element_selector').val('value').change();

another example:

//By tag
$('[name=selectxD]').val('value').change();

another example:

$("#select_element_selector").val('value').trigger('chosen:updated');

Answer 2

I found that the following worked for me - instead on using on click, use on change e.g.:

 jQuery('#element select').on('change',  (function() {

       //your code here

}));

Answer 3

I use a two part solution

• Part 1 - Register my click events on the options like I usually would
• Part 2 - Detect that the selected item changed, and call the click handler of the new selected item.

HTML

<select id="sneaky-select">
  <option id="select-item-1">Hello</option>
  <option id="select-item-2">World</option>
</select>

JS

$("#select-item-1").click(function () { alert('hello') });
$("#select-item-2").click(function () { alert('world') });

$("#sneaky-select").change(function ()
{
   $("#sneaky-select option:selected").click();
});

Answer 4

Since $(this) isn't correct anymore with ES6 arrow function which don't have have the same this than function() {}, you shouldn't use $( this ) if you use ES6 syntax.
Besides according to the official jQuery's anwser, there's a simpler way to do that what the top answer says.
The best way to get the html of a selected option is to use

$('#yourSelect option:selected').html();

You can replace html() by text() or anything else you want (but html() was in the original question).
Just add the event listener change, with the jQuery's shorthand method change(), to trigger your code when the selected option change.

 $ ('#yourSelect' ).change(() => {
    process($('#yourSelect option:selected').html());
  });

If you just want to know the value of the option:selected (the option that the user has chosen) you can just use $('#yourSelect').val()

Answer 5

I know that this code snippet works for recognizing an option click (at least in Chrome and FF). Furthermore, it works if the element wasn't there on DOM load. I usually use this when I input sections of inputs into a single select element and I don't want the section title to be clicked.

$(document).on('click', 'option[value="disableme"]', function(){
    $('option[value="disableme"]').prop("selected", false);
});

Answer 6

I've had simmilar issue. change event was not good for me because i've needed to refresh some data when user clicks on option. After few trials i've got this solution:

$('select').on('click',function(ev){
    if(ev.offsetY < 0){
      //user click on option  
    }else{
      //dropdown is shown
    }
});

I agree that this is very ugly and you should stick with change event where you can, but this solved my problem.