首先要引用

因为肯定要引用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. linux lcd设备驱动剖析二

    上一节中,分析了s3c2410fb,c的入口出口函数,以及一些重要结构体的分析,初步知道了这是一个平台驱动的架构. 上一节文章链接:http://blog.csdn.net/lwj103862095/ ...

  2. get与post两种方式的优缺点

    get: get是从服务器上获取数据,post是向服务器传送数据: get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80KB,IIS ...

  3. Flask 数据库多对多关系

    数据库使用关系建立记录之间的联系.其中,一对多关系是最常用的关系类型,它把一个记录和一组相关的记录联系在一起.实现这种关系时,要在“多”这一侧加入一个外键,指向“一”这一侧联接的记录.大部分的其他关系 ...

  4. 分布式爬虫搭建系列 之二-----神器PyCharm的安装

    这里我们使用PyCharm作为开发工具,以下过程摘抄于:http://blog.csdn.net/qq_29883591/article/details/52664478  作者:陌上行走 Pytho ...

  5. 凸优化 Convex Optimization PDF 扫描文字识别版

    凸优化理论 Convex Optimization 清华大学出版社 王书宁许窒黄晓霖译 Stephen Boyd Lieven Vandenbergt原著 2013 年l 月第1 版 下载链接 链接: ...

  6. Java面向对象-构造方法,this关键字

    Java面向对象-构造方法,this关键字 构造方法 概念:构造方法是一个特殊的方法,这个特殊方法用于创建实例时执行初始化操作: 上代码: package com.java1234.chap03.se ...

  7. url的进行传参拼接

    在项目中会遇到把这一个页面的参数传到下一页里面,这里我在项目中用到一个例证(大神就绕过吧嘻嘻):url: '/pages/buy/submitOrder/submitOrder?sku_id=' + ...

  8. telnet测试端口是否正常打开

    点击计算机的开始菜单-->运行 ,输入CMD命令,然后确定.打开cmd命令行.   输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 回车   如果端口关 ...

  9. OK6410&nbsp;tftp下载内核、文件系…

    飞凌官方提供了一键下载烧写linux的方式,相对来说比较方便,但是对于开发来说不够灵活,因此这篇文章把tftp相关的点介绍一下,整理下其中遇到的一些问题. 一键烧写本质上是启动位于SD卡中的Uboot ...

  10. 【HDU6024】Building Shops

    题意 有n个教室排成一排,每个教室都有一个坐标,现在,小Q想建一些糖果商店,在这n个教室里面.总的花费有两部分,在教室i建一个糖果屋需要花费ci,对于没有任何糖果屋的P,需要的花费为这个教室到它左边有 ...