给出：
<select id="mySelect">
<option>..</option>
...
</select>
使用选择 id，如何在其中一个选项上触发点击事件？我尝试将事件直接附加到选择，但是只要单击选择（即使没有选项），就会触发一个事件。哦，它是一个多选（虽然我认为这无关紧要）。
jquery 选择选项单击处理程序
IT技术
javascript
jquery
html
2021-03-09 00:39:48
6个回答
您需要“更改”事件处理程序，而不是“单击”。
$('#mySelect').change(function(){
var value = $(this).val();
});
$('#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>你可以附加一个焦点事件来选择
$('#select_id').focus(function() {
console.log('Handler for .focus() called.');
});
我在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;
});
您也可以尝试此操作以获取选择的先前值和单击的值。
HTML
<select name="status">
<option value="confirmed">confirmed</option>
<option value="packed">packed</option>
<option value="shiped">shiped</option>
<option value="delivered">delivered</option>
</select>
脚本
var previous;
$("select[name=status]").focus(function () {
previous = this.value;
}).change(function() {
var next = $(this).val()
alert("previous: "+previous+ " and Next: "+ next)
previous = this.value;
});