jQuery change事件在下拉列表只有一个选项时不触发。

Question

jQuery change事件在下拉列表只有一个选项时不触发。

4

我正在尝试在下拉菜单中点击选项时触发事件。我找不到任何解释如何做到这一点的内容。我的目标是触发事件并使用其值。当我使用.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：修复了那个问题，但不是我的问题，当选择只有1个选项或多次单击选项时仍然不会触发任何事件 这不是我想要的

charu joshi：使用.on事件和：option selecter，不起作用，因为：option selecter是未知的，也无法在jQuery API文档中找到 不起作用

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

因此，“重复”问题的所有上述答案均不适用于我的问题/问题。此外，原始海报也没有标记这些答案中的任何一个为已接受。

- Niek Jonkman

change事件的问题在哪里？你可以在注册事件时调用处理程序，如下所示：$("select").on("change", function(){}).change(); - Rayon

$("select").change("click", function () { 或者 $("select").on("click/change", function () {？ - a_nain

在下拉菜单上同时使用click和change事件是一个不好的主意，因为change事件会紧随着下拉菜单本身的click事件。所以最好决定何时附加click事件。 - Rohit416

都不行，最终我想触发一个更改（或任何）事件，以处理当下拉菜单中只有一个选项可用时的选项单击，但我不想通过点击下拉箭头来触发事件，只有在实际选项被单击时才触发。 - Niek Jonkman

尝试这个 $( "select" ) .change(function () { $('#select option:selected').val() } - Suraj Singh

不行，只有在选择中至少有两个选项时才有效。它的行为类似于普通的.change，当只有一个选项时什么也不会发生。 - Niek Jonkman

3个回答

0

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

问题在于您正在尝试更改控件的内部而不是基于控件本身执行操作。除非在接口中指定，否则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>

- Bradley Ross

0

尝试这段代码：

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/

对于下拉选择框中的一个项目，我使用了值聚焦事件，并在选择项目后通过更改事件更新了该值。希望它能够满足您的需求。

- Bilas Sarker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- a_nain · Accepted Answer

定义：

当元素的值被更改时，onchange事件就会发生。

当只有一个选项时：

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

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

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

我建议您在您的选择列表中添加一个额外的带有值 -1 或 0 的选项。

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

或者您可以像@Bradley Ross所建议的那样创建一个自定义选择控件。