html设置下拉筛选可以多选,select下拉框（支持筛选、多选）

Chosen 是一个支持jQuery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。

先来看下插件的效果：

跟这个比起来，原来的select样式是不是弱爆了！

1、先把js和css文件引用到网页里面去：

2、创建一个select元素，如下：

3、然后在js中调用Chosen定义的方法：

4、搞定收工，屌丝立马变成高富帅有木有~

chosen插件的一些设置项:

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字，也就是在没有选择选项的情况下，显示的文字。

这里还要注意一点，要想显示出默认文字，select下的第一个选择项必须为空的option。

2、对其方式

选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：

3、JS参数设置

在调用chosen()方法时，我们可以设置一些参数：

选项

描述

no_results_text

无搜索结果显示的文本

allow_single_deselect

是否允许取消选择

max_selected_options

当select为多选时，最多选择个数

4、事件

a) change事件：

b) 当我们需要动态更新select下的选择项时，该怎么办呢？只要在更新选择项后触发Chosen中的liszt:updated事件就可以了：

其他问题：

1、如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：

2、做为天朝的程序猿，不得不考虑ie6和ie7下的情况。好吧，用ie6打开一看，select还是一副屌丝样!

翻看chosen.jquery.js发现在chosen方法中有如下一段，ie6和ie7直接返回select对象本身：

把这段js注释掉，重新打开ie6和7，不再屌丝了有木有！虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

终于能高高兴兴地在ie6使用了，尼玛过了会又发现问题了，还是坑爹的ie6和7！如果2个select在一起又不和谐了，请看：

点开选择部门，尼玛这是闹哪样！见图：

好吧，这应该是z-index的问题，把css修改下，结果各种div各种z-index改到吐血还是这副死样子。

最后没办法了，想了个笨办法，动态改变所有chzn-Container的z-index，在点击select的时候让当前container的z-index最高，让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法：

将此方法改为：

当然，你也可以在生成.chzn-container的时候按顺序赋予不同的z-index，这样就可以不用每次点击select都要重新设一遍了。

至此，ie6和ie7下使用Chosen基本没什么问题了。。。

本文来源于网络：查看 >https://blog.csdn.net/qq_36263601/article/details/73106890

html设置下拉筛选可以多选,select下拉框（支持筛选、多选）相关推荐

html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...
php下拉默认选中的值,select下拉框默认选中
这次给大家带来select下拉框默认选中,select下拉框默认选中的注意事项有哪些,下面就是实战案例,一起来看一下. 本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和 ...
select多选下拉框移动端_使用select2实现多选select下拉框
多选标签: 卡卡西鸣人佐助小樱波风水门大蛇丸纲手自来也单选标签: 请选择... 卡卡西鸣人佐助小樱波风水门大蛇丸纲手自来也 $(function(){ $('#sel_p ...
element-ui主表格多选后二级弹框表格默认全选数据
需求:element ui的主数据列表多选后,点击按钮进入二级弹框后,让二级弹框的所有数据默认全选二级弹框结构: 网上试了好多方法都未生效,只有用watch监听的方法才行. 注意:这里必须放在thi ...
select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
Html前端基础（select下拉选标签、table表格标签）
文章目录一.select 下拉选标签二.table表格标签三.练习代码继续前两篇的Html前端基础的内容,本文主要关于 <select>下拉选标签和 <table>表格 ...

html设置下拉筛选可以多选,select下拉框（支持筛选、多选）

html设置下拉筛选可以多选,select下拉框（支持筛选、多选）相关推荐

最新文章

热门文章