即使没有更改，也选择了 JQuery 检测下拉值答案

【问题标题】：JQuery detect dropdown value is selected even if it's not changed即使没有更改，也选择了 JQuery 检测下拉值
【发布时间】：2013-06-26 17:48:29
【问题描述】：

使用 JQuery 或 JavaScript，我想检测用户何时选择了一个值，即使他们没有更改已选择的值。

如何做到这一点？

我试过了-

$('#MyID').select(function(){ /*my function*/ });

和

$('#MyID').change(function(){ /*my function*/ }); //nothing changing, so this fails

但它们不起作用。

示例 - 我有一个包含年份列表的下拉列表，没有选择任何内容，用户选择“1976”，我运行一个函数。选择“1976”后，用户再次单击下拉菜单并选择“1976”再次，我想再次运行该功能。

【问题讨论】：

你不能，因为选择相同的值不是改变，它是相同的。也许您可以只听元素上的任何点击，这与您在不破坏默认浏览器行为的情况下所获得的一样接近。
也许尝试听一下option的点击？
@AndrewPeacock - 选项元素不会在所有浏览器中触发鼠标事件。
这里是您问题的答案：stackoverflow.com/a/898761/1648170 stackoverflow.com/questions/11002421/…
为什么在值没有变化的情况下再次运行函数？可能有更好的方法来解决这个问题

标签： javascript jquery drop-down-menu

【解决方案1】：

所有系统都运行（至少在第二次点击时...）

将开关设置为在选择时运行，并在捕获和/或blur 后重置开关。

var go = false;//switch off
$('#MyID').on('click',function() {//on click
    if (go) {//if go
        //do stuff here with $(this).val()
        go = false;//switch off
    } else { go = true; }//if !go, switch on
}).on('blur', function() { go = false; });//switch off on blur

做了一个小提琴：http://jsfiddle.net/filever10/2XBVf/

edit:对于键盘支持也是如此，这样的东西应该可以工作。

var go = false;//switch off
$('#MyID').on('focus active click',function() {//on focus/active
    doit($(this));//do it
}).on('change', function() {
    go=true;//go
    doit($(this));//and doit
}).on('blur', function() { go = false; });//switch off on blur

function doit(el) {
    if (go) {//if go
        //do stuff here with el.val()
        go = false;//switch off
    } else {go=true}//else go
}

做了一个小提琴：http://jsfiddle.net/filever10/TyGPU/

【讨论】：

正确，如果 OP 指定我会做更像this

【解决方案2】：

你试过.blur()吗？

$('#MyID').blur(function(){
    //my function
});

请注意，在触发该功能之前，您必须单击页面上下拉菜单之外的某个位置。不知道能不能通过。

JsFiddle here

【讨论】：

你也可以试试 .focusin() 和 .blur()，它在 Chrome 中对我有用（见小提琴）。
当我选择已经选择的相同值时，我会注意到。
现在我不确定我是否正确理解了这个问题。即使用户多次单击同一字段like this，您也想触发该功能？或者您想在有人 “选择” 框并在不更改任何内容的情况下离开时触发该功能（这就是我最初的答案打算做的）？感谢您的澄清。
我想解释它的最好方法是通过示例 - 我有一个下拉列表，其中没有任何选择，用户选择“1976”，我运行一个函数。如果用户再次点击下拉菜单并再次选择“1976”，我想再次运行该函数。
非常感谢，我现在明白了。我再次更新了我的答案。 .blur() 似乎是我所知道的最接近的解决方案，但在触发该功能之前仍有一些延迟。

【解决方案3】：

试试这个...

获取所选选项的值...

$("body").click(function(event) {
    if(event.target.nodeName== "SELECT"){
                 selectedValue = event.target.value;
            }   
});

然后从值中获取文本

var text = $("option").filter(function() {
      return $(this).attr("value") === selectedValue;
    }).first().text();

【讨论】：

【解决方案4】：

你有没有尝试过：

$('#MyID li').click(function(){ //my function });

在这里，您正在检测对下拉列表中的列表元素的点击，这应该是不同的选项。（如果您的 HTML 略有不同，只需检查一下，看看所有选项有什么共同点，它们是什么类型的元素？）

【讨论】：

没关系...我刚刚意识到这个 html 是由于我正在使用的一个插件，我尝试使用像 $('#MyID option').click(...) 这样的选项元素，但这不起作用，对不起！

【解决方案5】：

$('#MyID option').hover(function(){
   //user is on an option, but not selected it yet
},function(){
   //user left an option without selecting
}).click(function(){
   //user clicked on an option, selecting it

});

【讨论】：

【解决方案6】：

试试这个代码。

$("#MyID").click(function (){
    alert($("#MyID").val());
});

Try Here!

【讨论】：

虽然这可以捕获点击事件，但它并没有给用户选择的选项

【解决方案7】：

我制作了一个仅在 Firefox 上测试过的工作 jsfiddle。通过向选择框添加一个虚拟选项，我已经成功地完成了您想要的操作。此虚拟选项具有display:none 样式，不会在选项列表中可见。

DEMO

<select id="myselect">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3" selected="selected">three</option>
    <option value="4">four</option>
    <option class="dummy" style="display:none">dummy</option>
</select>



$('#myselect').on('focus',function(){    
    $(this).find("option.dummy").prop("selected", true);
});

$('#myselect').on('change',function(){
    var select=$(this);
    var text=select.find("option:selected").text();

    $('.dummy').attr('value',select.val()).text(text);
    alert(select.val());


});

【讨论】：