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

＆＃34;重复＆＃34;有6个答案：

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

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

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

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

charu joshi：使用 .on 事件：选项选择器，因为：选项选择器未知，也无法在jQuery API文档中找到，因此无法工作 不能工作

derp：这个答案解释了如何删除重复项然后使用更改事件，这可能适用于＆＃34;重复＆＃34;的问题。但我从来没有在我的选择中加载重复的项目，即便如此，它仍然使用不能做我想要的更改事件，如我的问题中所解释的 此答案对我的问题没有贡献

所以上述所有答案都来自＆＃34;复制＆＃34;问题不适用于我的问题/问题。这些答案中没有一个标记为原始海报所接受的。

Answer 1

根据定义：

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

当只有一个选项时：

<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

建议的自定义选择控件

Answer 2

试试这段代码：

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/

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

Answer 3

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

问题是您正在尝试更改控件的内部，而不是基于控件本身的操作。除了界面中指定的内容之外，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>

当下拉列表包含一个项

3 个答案: