JQuery检测下拉值被选中，即使它's没有改变

JQuery detect dropdown value is selected even if it's not changed

本文关键字：改变 检测 JQuery      更新时间：2023-09-26

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

如何才能做到这一点？

我试过了-

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

和

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

但它们不起作用。

示例-我有一个下拉列表，里面有年份列表，没有任何选择，用户选择"1976"，我运行一个函数。选择"1976"后，用户再次点击下拉菜单，并再次选择"1976"，我想再次运行该功能。

所有系统都进入（至少在第二次点击时…）

将开关设置为在选择时运行，并在捕获和/或在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/

编辑：对于键盘支持，类似这样的操作应该可以。

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/

你试过.blur（）吗？

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

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

JsFiddle here

试试这个。。。

要获取所选选项的值。。。

$("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();

你有没有尝试过这样的东西：

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

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

$('#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
});

试试这个代码。

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

试试这里！

我制作了一个只在firefox上测试的工作jsfiddle。我已经通过在选择框中添加一个伪选项来完成您想要的操作。此伪选项具有display:none样式，在选项列表中不可见。

演示

<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());

});
相关文章：