首先要引用

因为肯定要引用jq,所以就没有写啦

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

然后 是 主体 select

<select id="keylist" data-placeholder="Choose a Country..." multiple class="my-chosen-select">
<option value="1">United States</option>
<option value="2">United Kingdom</option> </select> class 是主要的.js是根据这个class="my-chosen-select" 来找到这个元素
multiple  代表可以多选
初始化
//初始化插件 chosen
$(".my-chosen-select").chosen({
width: "100%", //宽度
search_contains:true//模糊搜索开启
});
.my-chosen-select就是之前class设置的
初始化放到最后面就行

选中多个

$("#keylist option[value='2']").attr("selected",true);
$("#keylist").trigger("chosen:updated");//更新
keylist 是select 的id ;
需要更新才能生效

获取 选中的值

$("#keylist").val()
keylist是select 的id

select chosen 的入门使用的更多相关文章

  1. Jquery select chosen 插件注意点

    <select style="width:200px;" name="carId" data-placeholder="选择车辆牌照" ...

  2. select chosen 禁用下拉框某一个option

    $("#tbParBudCode option[value='" + budCodeId + "']").attr("disabled", ...

  3. jquery select chosen禁用某一项option

    $("#tbParBudCode").chosen().change(function () { $("#tbParBudCode option[value='" ...

  4. jquery select chosen 动态绑定值

    $("#ddlMstData").find("option[value=" + data.MstKey + "]").attr(" ...

  5. 下拉框select chosen被遮盖

    最简单的就是让容器高度大点. 用js调整也行. 为什么z-index不管事,看下面... 浏览器支持 所有主流浏览器都支持 z-index 属性. 注释:任何的版本的 Internet Explore ...

  6. chosen组件实现下拉框

    chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...

  7. jquery plugins —— Chosen

    官网地址:http://harvesthq.github.io/chosen/ Chosen (v1.4.2) Chosen has a number of options and attribute ...

  8. chosen下拉框插件的使用

    效果如下 第一步: 第二步: 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值. <link r ...

  9. JQueryUI Chosen插件

    github地址:https://harvesthq.github.io/chosen/#change-update-events Using Chosen is easy as can be. Do ...

随机推荐

  1. MFC学习(四) 消息机制

    1 消息机制的要点: 消息队列:先进先出 消息循环:通过循环while,不断的从消息队列中取得队首消息,并分发消息. 消息处理:根据不同的消息类型做不同的处理 事件:事件响应函数 2 消息机制 _tW ...

  2. 在液晶屏里显示浮点数的方法 (sprintf 的妙用)

    思路:使用 sprintf 函数将浮点型数据转为指定格式的字符串 #include <stdio.h> #include<string.h> int main() { unsi ...

  3. Py修行路 内置模块补充 datetime模块

      Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.datetime模块用于是date和time模块的合集,他内部重新封装了time模块,相比于time ...

  4. requests的响应返回值显示content和text方法的区别

    requests的get或者post请求,返回的响应response获取方法:content和text content用于获取图片,返回二进制数据 text用于获取内容,返回的是unicode解码字符 ...

  5. ceph 创建和删除osd

    ceph 创建和删除osd 1.概述         本次主要是使用ceph-deploy工具和使用ceph的相关命令实现在主机上指定磁盘创建和删除osd,本次以主机172.16.1.96(主机名ha ...

  6. Oracle11gr2_ADG管理之跳归档恢复dg实战

    模拟故障 关闭备库 SQL> shutdown immediate; Database closed. Database dismounted. ORACLE instance shut dow ...

  7. springboot整合图像数据库Neo4j

    百度百科: Neo4j是一个高性能的,NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数据存储在网络(从 ...

  8. Asp.net Web Application 打开 SharePoint 2010 Site 错误 The Web application at could not be found

    解决办法如下: 1. 修改项目的.net framework 为3.5 2. Application Pool 选用 Sharepoint App pool 3. 修改 web.config如下: & ...

  9. 【原创】1. MYSQL++简介

    MYSQL++是对于MYSQL C API的C++完全包装. MYSQL++能够至少做如下几件事情 1. 连接数据库 通过TCP连接数据库 通过WINDOWS命名管道连接数据库 UNIX域SOCKET ...

  10. 【FZU 2277】Change

    题意 有一颗有n个节点的有根树,根节点编号时1,每个结点都有一个值ai,开始的时候,所有节点的值都是0. 我们有q个操作,操作只有两种类型 1 v x k,a[v]+=x,a[v']+=x-k,a[v ...