首先要引用

因为肯定要引用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. Zabbix自定义监控网站服务是否能够正常响应

     监测tcp连接数文件名: /etc/zabbix/zabbix_agentd.conf.d/count_tcp.conf UserParameter=count.tcp,netstat -s|g ...

  2. C# 通用类型转换方法

    在程序开发过程中经常需要进行数据的类型转换,而且如果一个字段的类型改成另一个类型时,所有相关的类型转换的地方都要跟着修改,不但造成了很多重复转换的代码而且修改字段类型时额外修改相关转换代码的工作量也很 ...

  3. c#6.0特性

    (1)可以直接对自动属性初始化,而且允许非标准属性使用 例如: public string Gender{get;}="男";//非标准属性 public DateTime Bir ...

  4. Hadoop的HA机制

    前言:正式引入HA机制是从hadoop2.0开始,之前的版本中没有HA机制 1. HA的运作机制 (1)hadoop-HA集群运作机制介绍 所谓HA,即高可用(7*24小时不中断服务) 实现高可用最关 ...

  5. 【知识碎片】 Linuxb 篇

    3.登录mysql 开启MySQL服务后,使用MySQL命令可以登录.一般使用mysql -uroot -p即可.如果数据库不是本机,则需要加参数,常用参数如下:1,-h,指定ip地址,默认为loca ...

  6. PHP数据结构之四 一元多项式的相加PHP单链实现

    <?php /** *一元多项式的表示和相加 *一元多项式的表示采用单链表的形式 **/ header("content-type:text/html;charset=gb2312&q ...

  7. sql2012新的系统函数&分析函数

    一 .系统函数 1.字符串类函数:不用判断类型和NULL的字符串连接CONCAT函数 SQL Server本来对字符串的连接很简单,直接使用“+”号,但是需要注意两个问题,一是必须类型都是字符串类型, ...

  8. C语言实践 输出100以内的素数

    int main() { int isprime = 1; for (int i = 2; i < 101; i++) { isprime = 1;//要确保每次循环都要把这个值设置为1,不然上 ...

  9. Openssl ca命令

    一.简介 ca命令能够签发证书请求文件以及生成CRL列表 二.语法 openssl ca [-verbose] [-config filename] [-name section] [-gencrl] ...

  10. poj1722 SUBTRACT

    应该是基础的dp练手题 线性dp最主要的就是关于阶段的划分,这个题中我没想到的一点就是开状态的时候使用了前i个数能合成的数来记录 我自己的想法就是类似于区间dp这样的记录方法,这种方法确实开了很多冗余 ...