jquery.chosen 强大的jquery模拟下拉框(select)插件

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

先来看看插件的效果

跟原来的下拉列表比起来这个是不是叼爆了！！

下面跟着我来武装我们的select吧！

1.引入jquery库和脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>

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

<select class="typeselect"style="height:40px;width:120px;">
<option value="-1"></option>
<option value="0">限速牌</option>
<option value="1">标志牌</option>
<option value="2">红绿灯</option>
<option value="3">摄像图</option>
<option value="4">收费站</option>
<option value="5">加油站</option>
<option value="6">充电桩</option>
<option value="7">停车场</option>
</select>

3.然后在js中调用chosen定义的方法(初始化组件)：

$(function(){
$('.typeselect').chosen();
});

注意事项：

1.默认文字选项：

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

<select  id="typeselect" data-placeholder="请选择类型" style="height: 40px; width: 120px;">
<option value="-1"></option>
<option value="0">限速牌</option>
<option value="1">标志牌</option>
<option value="2">红绿灯</option>
<option value="3">摄像图</option>
<option value="4">收费站</option>
<option value="5">加油站</option>
<option value="6">充电桩</option>
<option value="7">停车场</option>
</select>

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

2.对齐方式：

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

<select data-placeholder="请选择类型" class="dept_select
chzn-rtl" style="width:150px;">