首页 > 代码库 > Chosen

Chosen

前言:

想要达到下拉框有多选的情况。

过程:

1.因为本次工作项目使用的是surperUI,而它则是基于bootstrap框架搭建而成的。于是自然而然的就想到了使用bootstrap中的select插件。可是因为不太熟悉该框架的使用方法,于是看了一下使用方法,就上手写代码了。知道最终研究细节时,才发现出现了一些问题:

首先,不会取到select的value值;其次,不会回显其值。反复考量之后,才决定摒弃这哥熟知的方法,而选择另外一款方便好用的插件——Jquery chosen。

2.关于Jquery chosen的介绍(https://harvesthq.github.io/chosen/):

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.(chosen是一个jQuery插件:它会使冗长笨重的选择框变得更加的友好。)

因为它有较多是介绍,以及相对比较全面的api,所以使用起来就相当方便。比如:

1)在页面中只需引入相应文件即可:

...    <link href="chosen.css" type="text/css" rel="stylesheet" />    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="chosen.jquery.js"></script>...

2)在html中创建相应的select元素:

...<select name="cidt" style="width:150px;" id="cid" class="cid_select" placeholder="请选择">    <option value="1">西安</option>    <option value="">厦门</option>    <option value="3">成都</option>    <option value="4">重庆</option>    <option value="5">南宁</option></select>...
3)然后在script

Chosen