Событие Click на элементе выбора опции в хроме

У меня проблема в Chrome со следующим:

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

items.each(function(){

    $(this).click(function(){

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

Событие click похоже не срабатывает в Chrome, но работает в Firefox.

Я хочу иметь возможность click в элементе option из комбо, если я использую вместо этого другой элемент, скажем <li>, он отлично работает. Есть идеи? Спасибо.

Ответ 1

Я не считаю, что событие click действительно для опций. Однако это справедливо для отдельных элементов. Попробуйте:

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});

Ответ 2

Мы можем достичь этого иначе, несмотря на прямое вызывающее событие с <select>.

Часть JS:

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

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

Часть HTML:

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

Ответ 3

Я обнаружил, что для меня это работало - вместо этого при использовании на клике используйте при изменении, например:

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

       //your code here

}));

Ответ 4

У меня был простой вопрос. Событие change не подходит для меня, потому что мне нужно обновить некоторые данные, когда пользователь нажимает option. После нескольких испытаний у меня есть это решение:

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

Я согласен с тем, что это очень уродливо, и вы должны придерживаться события change, где можете, но это решило мою проблему.

Ответ 5

Простой способ изменить выбор и обновить его.

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

другой пример:

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

другой пример:

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

Ответ 6

<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 {
    ...
    }
});

Ответ 7

Что обычно работает для меня, так это сначала изменить значение выпадающего списка, например

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

а затем вызвать изменение

$('#selectorForOption').changed()

Таким образом, любой javascript, подключенный к

Ответ 8

Возможно, одна из новых версий jquery поддерживает событие click на опциях. Это сработало для меня:

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

UPDATE: Возможная функция usecase может быть следующей: пользователь отправляет html-форму и значения вставляются в базу данных. Однако по умолчанию установлены одно или несколько значений, и вы указываете эти автоматические записи. Вы также показываете пользователю, что его запись генерируется автоматически, но если он подтвердит запись, нажав на уже выбранную опцию, вы измените флаг в базе данных. Редкий иск, но возможно...

Ответ 9

Я знаю, что этот фрагмент кода работает для распознавания нажатия кнопки (по крайней мере, в Chrome и FF). Кроме того, он работает, если элемент не присутствовал при загрузке DOM. Обычно я использую это, когда вводя разделы входов в один элемент select, и я не хочу, чтобы заголовок раздела был нажат.

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

Ответ 10

Так как $(this) больше не работает с функцией ES6 arrow, которая не имеет того же this, что function() {}, вы не должны использовать $(this), если используете синтаксис ES6.
Кроме того, согласно официальному jQuery anwser, есть более простой способ сделать то, что говорит верхний ответ.
Лучший способ получить html выбранного варианта - использовать

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

Вы можете заменить html() на text() или что-нибудь еще, что вы хотите (но html() был в исходном вопросе).
Просто добавьте прослушиватель событий change с помощью сокращенного метода jQuery change(), чтобы вызвать код при изменении выбранной опции.

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

Если вы просто хотите узнать значение option:selected (вариант, который выбрал пользователь), вы можете просто использовать $('#yourSelect').val()

Ответ 11

Обход проблемы:

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