javascript - 当下拉列表包含一项时，jQuery 更改不会触发

Question

我试图在单击下拉列表中的选项时触发事件。我找不到任何解释如何执行此操作的内容。我想要的是触发事件并使用它的值。当我使用 .on 而不是 .change 时，每次单击选择时都会触发事件，这不是我想要的，因为我只想使用所选项目的值.

假设这是动态生成的:

<select id="dropdownOne">
<option value="1">NumberOne</option>
</select>

假设这是动态生成的:

<select id="dropdownTwo">
<option value="1">NumberOne</option>
<option value="2">NumberTwo</option>
</select>

JS:

$("select").change("click", function () {
    //This event is not fired in dropdown one

    //This event is only fired in dropdown two if I change the option
    var value = $(this).val();

    if(value == 1){
        console.log("This logs number 1");
    }else{
        console.log("This logs number 2");
    }
}

我怎样才能:

• 在仅包含一项的下拉列表中的一项上触发事件
• 在被多次点击的项目上触发事件

编辑:因此，我的问题被标记为重复:

How to call onchange event when dropdown values are same

“重复”有 6 个答案:

Vicky Kumar:说那个问题的代码很好并且可以工作。 这个答案对我的问题没有帮助

ajpocus:有一个答案，后来被编辑说它不起作用。 不起作用

Krupesh Kotecha:对选择使用点击事件，与 .on 行为相同 这不是我想要的

Teja:修复了那个问题但不是我的问题，当 te select 只有 1 个选项或当您多次单击一个选项时仍然不会触发任何事件 这不是我想要的

charu joshi:将 .on 事件与 :option 选择器一起使用，不起作用，因为 :option 选择器未知，也无法在 jQuery API 文档中找到 不起作用

derp:这个答案解释了如何删除重复项然后使用更改事件，这可能适用于“重复项”的问题，但我从不在我的选择中加载重复项，即使那样它仍然使用更改事件正如我的问题中所解释的，这不符合我的要求 这个答案对我的问题没有帮助

因此，“重复”问题的上述所有答案均不适用于我的问题/问题。此外，这些答案均未被原始发布者标记为已接受。

Answer 1

根据定义:

The onchange event occurs when the value of an element has been changed.

当只有一个选项时，例如:

<select id="dropdownOne">
   <option value="1">NumberOne</option>
</select>

无论您尝试更改/点击选项多少次，select 的值都将保持不变，1。并且更改事件永远不会执行。

并根据this answer , onSelect()和 onClick() <option> 不支持事件标签。

我建议您在选择前添加一个值为 -1 或 0 的附加选项。

<select id="dropdownOne">
    <option value="-1">--- Select ---</option>
    <option value="1">NumberOne</option>
</select>

或者您可以创建自定义选择控件，如 @Bradley Ross 所建议的那样