首先要引用

因为肯定要引用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. Ehcache入门介绍一

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. 特性有: 1. 快速轻量 Ehcache的线程机制是为大型高并发系统设 ...

  2. maven(基础介绍一)

    maven:提供的作用有以下几点: 1 jar包依赖 这个也许会maven最突出的特点了使用maven不需要上网单独下载jar包,只需要在配置文件pom.xml中配置jar包的依赖关系,就可以自动的下 ...

  3. oracle 12c使用问题总结

    1.无法登录 安装完毕只能使用system和sys用户,用安装时配置的密码登录:不能使用默认密码 2.远程无法访问 1)检测服务器配置 lsnrctl status 看到(DESCRIPTION=(A ...

  4. http响应chunked格式分析

    有的时候服务器生成HTTP回应是无法确定信息大小的,这时用Content-Length就无法事先写入长度,而需要实时生成消息长度,这时服务器一般采用Chunked编码. 在进行Chunked编码传输时 ...

  5. Python——通过斐波那契数列来理解生成器

    一.生成器(generator) 先来看看一个简单的菲波那切数列,出第一个和第二个外,任意一个数都是由前两个数相加得到的.如:0,1,1,2,3,5,8,13...... 输入斐波那契数列前N个数: ...

  6. 小白之js原生轮播图

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Shell脚本 判断

    #Linux系统Shell脚本判断变量文件目录:权限.是否存在.空值.相等 1.字符串判断 str1 = str2 当两个串有相同内容.长度时为真str1 != str2 当串str1和str2不等时 ...

  8. JQuery实现瀑布流页面

    views.py from django.shortcuts import render,HttpResponse from app01 import models import json # Cre ...

  9. Unity3D Physics Keynote

    [Unity3D Physics Keynote] 1.在哪设置Layer Collision Matrix? "Edit"->"Project Settings& ...

  10. c++之继承与派生

    再来回顾下继承派生的语法. 继承方式显示有三种(public, protected, privatez),隐式默认private.所谓继承方式,是指派生类对基类成员的访问权限控制. 派生类构造函数定义 ...