从选择中创建复选框列表弹出窗口

Question

我在创建用户单击选择字段时出现的多选复选框列表时遇到一些问题（我使用onfocus事件）。

就显示列表而言，这很好，但是如何阻止实际的选择字段使用javascript显示下拉列表？

Answer 1

为什么不呢！ ：）

DEMO

$('.sel').focus(function() {
    this.blur();
    window.focus();
    $('.dropdown').fadeToggle(300);
});

Answer 2

以下是我用来自定义select和fileupload控件外观的解决方案：

1. 通过css或jQuery fadeTo（）函数给你的元素（select）不透明度：0.1
2. 用容器div包装你的元素并给它position：relative。
3. 将一个兄弟（下拉面板）添加到元素并给它位置：absolute，top：，left：0和width等于元素的宽度。
4. 在$（select）.click（）事件中使用jQuery显示下拉面板。

可能看起来很奇怪，但跨浏览器工作：）

Answer 3

Haven试图压制选择下拉菜单，但如果其他所有方法都失败了，您可以创建一个自定义表单元素。如：

<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />

将DL（或您想要的任何标记）设置为选择元素的样式，然后使用单击处理程序关闭多选项框。当选择一个选项以确保使用表单提交数据时，还使用JS填充隐藏的输入。

Answer 4

我需要类似的用户体验，所以我创建了这个：

harshniketseta.github.io/popupMultiSelect

希望这会对你有所帮助。