首先要引用

因为肯定要引用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. mybatis~SQL映射

    student.xml里面是这么写的: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE m ...

  2. Linux Restricted Shell Bypass

    Author: @n4ckhcker & @h4d3sw0rm Introduction Hello, so first of all let’s explain what is a rest ...

  3. WEB扫描器Atscan的安装和使用

    项目地址:https://github.com/AlisamTechnology/ATSCAN root@sch01ar:/sch01ar# git clone https://github.com/ ...

  4. Spring AOP基于注解的“零配置”方式实现

    为了在Spring中启动@AspectJ支持,需要在类加载路径下新增两个AspectJ库:aspectjweaver.jar和aspectjrt.jar.除此之外,Spring AOP还需要依赖一个a ...

  5. 虚拟机之 Wordpress博客搭建

    WordPress博客需要LAMP环境,---  LAMP 官网:https://cn.wordpress.org/ wordpress-4.4.1版本环境要求是: php 5.2.4或以上 mysq ...

  6. C++深度解析教程学习笔记(5)面向对象

    1. 面向对象基本概念 (1)面向对象的意义在于 ①将日常生活中习惯的思维方式引入程序设计中 ②将需求中的概念直观的映射到解决方案中 ③以模块为中心构建可复用的软件系统 ④提高软件产品的可维护性和可扩 ...

  7. linux下配置tomcat开机自启动

    Linux下配置tomcat开机自启动   1.写一个tomcat脚本,内容如下,设置其权限为755,放在/etc/init.d/目录下 #!/bin/bash## /etc/init.d/tomca ...

  8. java定时任务调度工具Timer与Quartz的区别

    Timer与Quartz的区别有三点: 1.出身不同:Timer由jdk直接提供,调用方式简单粗暴,不需要其它jar包支持.Quartz并非jdk自带,需要引入相应的jar包 2.能力区别:主要体现在 ...

  9. 闲来无事,做做Google:21 道能力倾向测试面试题

    1. Solve this cryptic equation, realizing of course that values for Mand E could be interchanged. No ...

  10. 1-3 并发与高并发基本概念.mkv