Click event on select option element in chrome

jquery google-chrome select

215004 просмотра

13 ответа

0 Репутация автора

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

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

items.each(function(){

    $(this).click(function(){

        // alert("test");
        process($(this).html());
        return false;
    });
});

The click event doesn't seem to fire in Chrome, but works in Firefox.

I wanna be able to click on a option element from a combo, if I do instead another kind of element, lets say <li> it works fine. Any ideas? Thanks.

Автор: Victor Источник Размещён: 09.09.2009 09:35

Ответы (13)


80 плюса

6037 Репутация автора

I don't believe the click event is valid on options. It is valid, however, on select elements. Give this a try:

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});
Автор: Samantha Branham Размещён: 09.09.2009 09:41

21 плюса

221 Репутация автора

We can achieve this other way despite of directly calling event with <select>.

JS part:

$("#sort").change(function(){

    alert('Selected value: ' + $(this).val());
});

HTML part:

<select id="sort">
    <option value="1">View All</option>
    <option value="2">Ready for Review</option>
    <option value="3">Registration Date</option>
    <option value="4">Last Modified</option>
    <option value="5">Ranking</option>
    <option value="6">Reviewed</option>
</select>
Автор: vivek sharma Размещён: 30.03.2012 05:42

0 плюса

854 Репутация автора

What usually works for me is to first change the value of the dropdown, e.g.

$('#selectorForOption').attr('selected','selected')

and then trigger the a change

$('#selectorForOption').changed()

This way, any javascript that is wired to

Автор: pardahlman Размещён: 05.08.2013 07:20

1 плюс

1201 Репутация автора

Maybe one of the new jquery versions supports the click event on options. It worked for me:

$(document).on("click","select option",function() {
  console.log("nice to meet you, console ;-)");
});

UPDATE: A possible usecase could be the following: A user sends a html form and the values are inserted into a database. However one or more values are set by default and you flag this automated entries. You also show the user that his entry is generated automatically, but if he confirm the entry by clicking on the already selected option you change the flag in the database. A rare sue case, but possible...

Автор: zuluk Размещён: 24.10.2014 09:02

3 плюса

33 Репутация автора

<select id="myselect">
    <option value="0">sometext</option>
    <option value="2">Ready for Review</option>
    <option value="3">Registration Date</option>
</select>

$('#myselect').change(function() {
    if($('#myselect option:selected').val() == 0) {
    ...
    }
    else {
    ...
    }
});
Автор: Artur Saidov Размещён: 03.12.2014 09:08

5 плюса

100 Репутация автора

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

}));
Автор: Elina Lulle Размещён: 22.01.2015 10:22

0 плюса

546 Репутация автора

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);
});
Автор: Gwi7d31 Размещён: 26.01.2015 08:49

4 плюса

76 Репутация автора

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.

Автор: Halon Размещён: 10.09.2015 07:47

0 плюса

1053 Репутация автора

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()

Автор: Ilan Schemoul Размещён: 01.07.2016 05:05

9 плюса

2471 Репутация автора

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');
Автор: DarckBlezzer Размещён: 19.08.2016 06:21

0 плюса

31 Репутация автора

Workaround:

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

Автор: JeanP Размещён: 24.02.2017 12:59

1 плюс

51 Репутация автора

Looking for this on 2018. Click event on option tag, inside a select tag, is not fired on Chrome.

Use change event, and capture the selected option:

$(document).delegate("select", "change", function() {
    //capture the option
    var $target = $("option:selected",$(this));
});

Be aware that $target may be a collection of objects if the select tag is multiple.

Автор: Adrián Suarez Bais Размещён: 16.02.2018 02:59

1 плюс

3210 Репутация автора

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();
});
Автор: Aaron Sherman Размещён: 14.04.2018 07:47
Вопросы из категории :
32x32