当下拉列表包含一个项目时，不会触发 jQuery 更改-解网

问：

我正在尝试在单击下拉列表中的选项时触发事件。我找不到任何解释如何做到这一点的东西。我想要的是触发事件并使用它的值。当我使用 .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");
    }
}

我怎样才能：

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

编辑：所以，我的问题被标记为重复：

当下拉列表值相同时如何调用 onchange 事件

“重复”有 6 个答案：

Vicky Kumar：说这个问题的代码很好，而且很有效。这个答案对我的问题没有贡献

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

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

Teja：解决了该问题的问题，但不是我的问题，当 te select 只有 1 个选项或多次单击某个选项时，仍然不会触发任何事件这不是我想要的

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

derp：这个答案解释了如何删除重复项，然后使用 change 事件，这可能适用于“重复”的问题，但我从未在我的选择中加载重复的项目，即使那样，它仍然使用 change 事件，它没有按照我的问题做我想要的 这个答案对我的问题没有贡献

因此，上述所有来自“重复”问题的答案都不适用于我的问题/问题。此外，这些答案都没有被原始发帖人标记为接受。

JavaScript jQuery

var value;
$('select').focus(function () {
        value = this.value;
        if(value == 1){
            console.log("This logs number 1");
        }else{
            console.log("This logs number 2");
        }
    }).change(function() {
      value = this.value;
      if(value == 1){
        console.log("This logs number 1");
      }else{
        console.log("This logs number 2");
      }
});

这是 jsfiddle 链接： https://jsfiddle.net/cdantdor/

对于选择下拉列表中的一个项目，我获得了值焦点事件，并在选择项目后通过更改事件更新值。希望它能实现你的目的。

0赞 Bradley Ross 6/22/2016 #2

以下代码可能满足您的需求，尽管它并不完全是您要求的。当您单击标有“选项”的按钮时，它会打开一个小菜单，当您单击“关闭菜单”时，该菜单会消失。虽然它实际上不是一个下拉菜单，但它作为一个下拉菜单。

问题在于，您正在尝试更改控件的内部结构，而不是基于控件本身执行操作。Javascript 对控件的内部几乎没有控制权，除非在接口中指定。

看看 http://www.w3schools.com/howto/howto_js_dropdown.asp

<!DOCTYPE html>
<html>
   <head>
      <script>
         var button;
         var textarea;
         var menu;
         var closer;
         function starter() {
            button = document.getElementById("button");
            textarea = document.getElementById("textarea");
            menu = document.getElementById("menu");
            closer = document.getElementById("close");
            textarea.value = "Display area for selections\r\n";
            button.onclick = open;
            closer.onclick = close;
         }
         function close() {
            menu.style.display = "none";
            menu.style.visibility = "hidden";
         }
         function open() {
            menu.style.display = "block";
            menu.style.visibility="visible";
         }
         function press(char) {
             textarea.value = textarea.value + char + "\r\n";
         }
         window.onload=starter;
      </script>
      <style>
         #menu { display:none; border: 2px solid black; }
      </style>
   </head>
   <body>
      <p>Click on button marked <i>Options</i> to open menu for selection.</p>
      <form>
         <div id="menu">
            <p>Clicking on options will cause them to appear in the text box</p>
            <ul>
               <li><input type="button" value="First" onclick="press('First');" /></li>
               <li><input type="button" value="Second" onclick="press('Second');" /></li>
               <li><input type="button" value="Third" onclick="press('Third');"</li>
               <li><input type="button" value="Close menu" id="close" /></li>
            </ul>
            <p>Click on <i>close menu</i> to close this section</p>
         </div>
         <p><input type="button" id="button" value="Options"  /> </p>
         <p><textarea cols="20" rows="20" id="textarea"></textarea></p>
      </form>
   </body>
</html>

4赞 a_nain 6/22/2016 #3

根据定义：

onchange 事件发生时，元素的值已改变。

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

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

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

而根据这个答案，和事件是不支持的标签。onSelect()onClick()<option>

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

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

或者，您可以按照 @Bradley Ross 的建议创建自定义选择控件

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

jQuery change does not trigger when a dropdownlist holds one item

评论

评论