选择框下拉的事件？

我有一个select元素，像这样：选择框下拉的事件？

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select>

我想是每个select箱下降到显示选项时被触发的事件，然后另一活动时，发生相反的情况被触发。

我尝试这样做：

$("select").click(function() { 
    $("#textMe").val("open"); 
}); 

$("select").change(function() { 
    $("#textMe").val("closed"); 
});

但我有几个问题：

如果用户实际上选择某种原因，它似乎像我change事件永远不会触发一个option - 为什么？
如果用户打开选择框，但随后在其页面上的其他地方单击以关闭选择框（它们实际上并未选择一个选项，因此没有任何更改）我不知道如何捕获该事件。

这里是一个jsFiddle。

来源

2013-12-19 FastTrack

另一种选择是在这种情况下实现一个由div创建的伪选择控件和一个引发事件的文本框。有点痛苦，但可能有一个jQuery插件可以做到这一点。 – JohnFx

这不是那么容易在你但您可以执行以下操作以捕获所有需要的事件：

jsfiddle

var opened = false; 

$("select").on("click", function() { 
    if(!opened){ 
     $("#textMe").val("open"); 
     opened = true; 
    } 
}); 

$("select").on("change", function() { 
    $("#textMe").val("change"); 

    setTimeout(function(){ 
     opened = false; 
    },0); 
}); 

$("body").on("click", function(e) { 
    if(!$(e.target).is("select")) { 
     $("#textMe").val("OUTSIDE"); 
     opened = false; 
    } 
});

来源

2013-12-19 14:22:05 enyce12

太棒了！谢谢！只是改变了我选择的答案 – FastTrack

没有特别针对select展开或折叠的事件。你不能单靠焦点或模糊，也不能单击。去它的最好的办法就是实现它手动即

选择
捕获Click事件的选择
捕获更改事件的捕获Click事件在“文件减去选择”单独
保持全局变量来确定选择自己是否被点击展开或者被再次点击来折叠。

这一切都取决于您如何整齐地考虑所有可能的交互形式与您的选择，以及在每种情况下会发生什么。

另外，有点冗长的方法可以摆脱HTML select干脆，创建自己的dropdown-like族元素，即一个文本框，当你开始键入它或者点击它它闪烁一个隐藏的div，就像任何这些自定义下拉列表（即引导选择），那里你可以很容易地附加任何触发器或事件的扩大和崩溃，（但我想这会有点矫枉过正：D）

来源

2013-12-19 14:09:38

选择框下拉的事件？

回答

相关问题