Jquery select click click handler

Ответ 1

Вы хотите обработчик события "change" вместо 'click'.

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

Ответ 2

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

Ответ 3

вы можете прикрепить событие фокусировки, чтобы выбрать

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

Ответ 4

Проблема, с которой я столкнулся при работе с обработчиком change, заключалась в том, что он срабатывал при каждом нажатии клавиш, когда я прокручивал вверх и вниз <select>.

Я хотел получить событие для каждого случая, когда была нажата какая-либо опция или когда была нажата enter для нужной опции. Вот как я это сделал:

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;

});

Ответ 5

Что я сделал в этой ситуации, так это то, что я включил элементы OnClick в опции:

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

Затем просто создайте функцию script следующим образом:

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

UPDATE: К сожалению, я не могу комментировать, поэтому я обновляю здесь
TrueBlueAussie явно jsfiddle имеет некоторые проблемы, проверьте здесь, если он работает или нет: http://js.do/code/klm

Ответ 6

Одним из возможных решений является добавление класса к каждой опции

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

а затем используйте обработчик кликов для этого класса

$(document).ready(function () {

    $(".export_option").click(function (e) {
        //alert('click');
    });

});

UPDATE: похоже, что код работает в FF, IE и Opera, но не в Chrome. Глядя на спецификации http://www.w3.org/TR/html401/interact/forms.html#h-17.6 Я бы сказал, что это ошибка в Chrome.