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

问题描述：

我试图在单击下拉列表中的选项时触发事件。我找不到解释如何做到这一点的任何事情。我想要的是引发事件并使用它的价值。当我使用。在而不是。更改我每次点击选择时触发该事件，那不是我想要的，因为我只想使用所选项目的值。当下拉列表中包含一个项目时，jQuery更改不会触发

认为这是动态生成的：

<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个答案：

薇琪·库马尔：说的是questio的代码ñ很好，工作。 此答案不对我的问题产生影响

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

Krupesh科特查：在选择，相同的行为。对 使用点击事件这不是我想要的

Teja公司：解决问题的这个问题但不是我的，还是不会触发任何事件时，TE选择只有1个选项，或当您单击一个选项不止一次 这不是我想要的

charu joshi：用途。在事件有：选项selecter，不能正常工作，因为：选项selecter是未知的，也可以不是jQuery的API文档 中找到不工作

DERP：这个答案说明如何删除重复然后使用更改事件，这可能适用于“重复”的问题，但我从不加载重复的项目在我的选择，即使如此，它仍然使用更改事件，这不会做我想要的，如我在问题 此答案不对我的问题造成影响

所以上述所有来自“重复”问题的答案不适用于我的问题/问题。也没有任何答案被标记为原始海报所接受。

什么是'change'事件的关注建议？（$“select”）。on（“change”，function（）{}）。change（）;' – Rayon

'$（“select”）。change（“click” ，function（）{'或'$（“select”）。on（“click/change”，function（）{'？ –

在点击时点击''和'change'事件是个坏主意，事件之后是一个点击本身，最好是决定何时附加'click'事件 – Rohit416

答

试试这个代码：

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/

对于选择降的一个项目下来，我得到的价值焦点事件和选择项目后，更新的价值改变事件。希望它会实现你的目的。

答

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

问题是您正试图改变控件的内部，而不是基于控件本身的操作。除非在界面中指定，否则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>

答

根据定义：

当元件的值已经改变发生onChange事件。

当只有一个选项，如：

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

不管你有多少时间来改变/点击选项，选择的值将保持不变，。而更改事件将永远不会执行。

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

我建议你预先选择一个值为-1或0的附加选项。

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

或者你可以创建一个自定义选择控制通过像@Bradley Ross

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

相关推荐