jquery 选择选项单击处理程序

Question

给定：

<select id="mySelect">
  <option>..</option>
  ...
</select>

使用选择 ID，我如何触发其中一个选项的点击事件？我尝试将事件直接附加到选择，但是只要单击选择（即使没有选项），这都会触发一个事件。哦，它是一个多选（虽然我不认为这很重要）。

Answer 1

    <select name="data" id = 'cohort' class="form-control" style = "width:215px; margin-left:20px; margin-bottom:8px ; height:30px" >
    <option value = 0>All</option>
    <option value = 1>Diseases</option>
    <option value = 2>Drugs</option>
    <option value = 3>Procedures</option>
    </select>

const element = document.getElementById("cohort");
const event = new MouseEvent("mousedown");
element.dispatchEvent(event);

Answer 2

你也可以试试这个来获取之前的选择值和点击的值。

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

Answer 3

它对我有用

<select name="" id="select">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</select>

<script>
    $("#select > option").on("click", function () {
       alert(1)
    })
</script>

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

});

Answer 5

在这种情况下我所做的是我将选项元素的 OnClick 事件放入如下：

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

然后像这样创建一个脚本函数：

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

更新： 不幸的是，我无法发表评论，所以我在这里更新
TrueBlueAussie 显然 jsfiddle 有一些问题，请在此处检查它是否有效或不是：http://js.do/code/klm

Answer 6

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

---

EXAMPLE

Answer 7

一种可能的解决方案是为每个选项添加一个类

<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');
    });

});

更新：看起来代码在 FF、IE 和 Opera 中有效，但在 Chrome 中无效。 查看规格 http://www.w3.org/TR/html401/interact/forms.html#h-17.6 我会说这是 Chrome 中的错误。

Answer 8

你可以附加一个焦点事件来选择

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

Answer 9

您想要“更改”事件处理程序，而不是“点击”。

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