通过单击或箭头键选择下拉列表时,表现不同

时间:2016-10-21 15:24:11

标签: 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/

如果我使用鼠标点击而不是使用向上和向下箭头从保管箱中选择一个项目,我希望触发此事件。

2 个答案:

答案 0 :(得分:1)

.on将事件传递给回调函数。您可以利用它来检测是点击还是按键。

如果单独绑定到clickkeyup,您可以通过检查事件类型来检测哪一个:

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

答案 1 :(得分:1)

只需在选择中使用“点击”事件:

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

这里有一个小提琴:https://jsfiddle.net/nemoneminis/rwza9xzt/1/

相关问题