首先要引用

因为肯定要引用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. Python Twisted系列教程9:第二个小插曲,Deferred

    作者:dave@http://krondo.com/a-second-interlude-deferred/ 译者:杨晓伟(采用意译) 可以从这里从头来阅读这个系列 更多关于回调的知识 稍微停下来再思 ...

  2. Ubuntu下编写C语言程序

    新建C文件,新建一个文件用touch,新建文件夹用mkdir. 打开文本编辑器,编辑C文件,命令用gedit xxx.C 编写C程序,Ctrl+S保存 编译运行 1.gcc命令是编译 -o是可选项 是 ...

  3. MySQL中SQL_CALC_FOUND_ROWS的用法

    1. SQL_CALC_FOUND_ROWS简述 在很多分页的程序中都这样写: #查出符合条件的记录总数 SELECT COUNT(*) from [table] WHERE ......; #查询当 ...

  4. android获取mp4视频文件总时长和视频宽高<转>

    android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...

  5. PHP下的手机号码效验

    手机号是否合法有效,基本都是用正则匹配的,所以正则表达式是关键,可以用到java.c#等语言里. /** * 验证手机号是否合法 * * @param string $mobile * 验证的手机号 ...

  6. java Integer类的缓存(转)

    首先看一段代码(使用JDK 5),如下: public class Hello { public static void main(String[] args) { int a = 1000, b = ...

  7. Java字节码

    Java字节码 javap -c 反编译.class文件可得字节码 知乎讨论https://www.zhihu.com/question/27831730 栈和局部变量操作 将常量压入栈的指令 aco ...

  8. 在ubuntu中编译内核是用make&nbsp;…

    执行过程如下: root@zyx-VirtualBox:~# cd /opt/EmbedSky/ root@zyx-VirtualBox:/opt/EmbedSky# cd linux-2.6.30. ...

  9. random和os模块

    一.random模块 常用方法如下: #-*- coding:utf-8 -*- import random print(random.randint(1,100)) # 获取一个范围内的随机数,包含 ...

  10. redis实现发布订阅

    订阅者 #!/usr/bin/env python # -*- coding:utf-8 -*- import redis r = redis.Redis(host='192.168.11.119') ...