Ведет себя по-разному при выборе выпадающего списка select щелчком мыши или клавишами со стрелками

#javascript #jquery

#javascript #jquery

Вопрос:

 <select id="s">
<option value="1">selected1</option>
<option value="2">selected2</option>
<option value="3">selected3</option>
<option value="4">selected4</option>
</select>
<div id="se">
</div>

$('body').on('change', '#s', function() {
    $('#se').text($('#s :selected').text() " / unfortunatly it also triggers when Im moving with the UP and DOWN keys, not just with select");
});
  

https://jsfiddle.net/8kLke2je/

Я хочу, чтобы это событие срабатывало, если я выбираю элемент из dropbox щелчком мыши, а не стрелками ВВЕРХ и ВНИЗ.

Ответ №1:

Просто используйте событие «click» при выборе:

     $('#s').click(function(){
            var sv = $('#s').val();
            $('#se').html("That's it: " sv);
    });
  

Здесь есть скрипка для этого: https://jsfiddle.net/nemoneminis/rwza9xzt/1 /

Ответ №2:

.on передает событие в функцию обратного вызова. Вы можете использовать это, чтобы определить, был ли это щелчок или нажатие клавиши.

Если вы привязываете отдельно к click и keyup , вы можете определить, какой из них, проверив тип события:

 $(document).on('click keyup', '#s', function(e) {
    if ('click' == e.type) {
        $('#se').text($('#s :selected').text());
    }
});