jquery Chosen使用

1,首先去http://harvesthq.github.io/chosen/下载插件。

2,在网页中加入下面的文件。

<link rel="stylesheet" href="/css/chosen.css" />

<script type="text/javascript" src="/js/jquery.form.js"></script>

<script type="text/javascript" src="/js/chosen.jquery.js"></script>

3,在页面中加入以下js:其中"emp_input_init"只是起到让jquery插件获取select元素的作用。

jQuery(‘.emp_input_init‘).chosen();

4,在页面中使用select标签的地方加入class,即可如下:

<select class="select_input_init"  id="emp_id"  name="empId">

<c:forEach items="${empList}" var="emp">

<option url =‘${emp.url}‘ value=‘${emp.id}‘> ${emp.name} </option>

</c:forEach>

</select>

注意:

如果有两个select标签进行级联 则需要在第二个select的事件中写入下面的js,否则级联失效.

jQuery(‘.emp_input_init‘).trigger("liszt:updated");

参考:http://blog.csdn.net/iamduoluo/article/details/11519909

时间: 2024-08-16 07:17:03

jquery Chosen使用的相关文章

jQuery Chosen 使用

1.  jQuery Chosen 选择框下拉值重置: //重置 $("#easySelBrands").val("默认值").trigger("chosen:updated"); 赋值为默认值后要用trigger("chosen:updated")更新,否则无效: 2. 多个select在一起的问题 在chosen.jquery.js中找到此方法: 1 Chosen.prototype.activate_field 2 =

Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值

在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态加载option和对option的选中.但是由于项目中使用了jquery里的chosen()方法,怎么也无法实现效果.原码如下: Java代码   <select id="viewOLanguage" data-rel="chosen"> <option value="zh">简体中文(简体中文 Chinese)</option>

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

jquery.chosen.js实现模糊搜索

jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true即可)可以让chosen搜索选项的中间及末尾字符 no_results_text是搜索不到内容时,显示的提示语 placeholder_text是下拉选项默认显示的文字 disable_search_threshold是select的option选项大于等于此值,才会显示查询的文本框 jQuery(

Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

? 在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果.原码例如以下: ? ? Java代码 ? <select?id="viewOLanguage"?data-rel="chosen">?? ????<option?value="zh">中文简体(中文简体?Chinese)&l

jquery chosen 插件多选初始化

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../css/chosen.css

validate验证jquery chosen相关问题

validate对jquery chosen-select无法验证,需要在validate加入 ignore: ":hidden:not(select)" 加入后可以成功校验,但是错误信息显示在select框上面 解决此问题是加入 errorPlacement $("#form-add").validate({ ignore: ":hidden:not(select)", rules: { id: { required: true } }, me

JQuery chosen插件,实现select多选

步骤:1.js 2.在select标签上添加 multiple="multiple" 属性 3.添加class=" chosen-select" 属性 即可实现多选 默认值选定: 1.获取标签默认值,根据格式拆分数据 2.使用 $('.chosen-select').chosen({ allow_single_deselect : true }); $('.chosen-select').trigger("liszt:updated"); eg:

Chosen

前言: 想要达到下拉框有多选的情况. 过程: 1.因为本次工作项目使用的是surperUI,而它则是基于bootstrap框架搭建而成的.于是自然而然的就想到了使用bootstrap中的select插件.可是因为不太熟悉该框架的使用方法,于是看了一下使用方法,就上手写代码了.知道最终研究细节时,才发现出现了一些问题: 首先,不会取到select的value值:其次,不会回显其值.反复考量之后,才决定摒弃这哥熟知的方法,而选择另外一款方便好用的插件--Jquery chosen. 2.关于Jque