首先要引用

因为肯定要引用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. mysql索引原理与慢查询优化2

    七 正确使用索引 一 索引未命中 并不是说我们创建了索引就一定会加快查询速度,若想利用索引达到预想的提高查询速度的效果,我们在添加索引时,必须遵循以下问题 1 范围问题,或者说条件不明确,条件中出现这 ...

  2. 爬取github上流行的python项目

    # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import requests from pyquery import PyQ ...

  3. Android 4 学习(14):Internet Resources

    参考<Professional Android 4 Development> 使用Internet资源 打开URI String myFeed = getString(R.string.m ...

  4. leetcode773

    使用两种语言实现,先贴C++的 class Solution { public: vector<vector<int>> floodFill(vector<vector& ...

  5. Mycat实战之数据迁移(oracle -- mysql)

    1.案例场景: Mycat 后面接一个 Oracle 实例与一个 MySQL 实例,假设用户表,订单表,转账记录表, Oracle 字符集为 GBK 的,MySQL 字符集则要求 UTF8的 完成用户 ...

  6. 切面(Aspect)获取请求参数和返回值

    @Before("webLog()") public void doBefore(JoinPoint joinPoint) throws Throwable { // 接收到请求, ...

  7. PL/SQL查询设计器

    被微软惯坏的我,在使用PL/SQL进行oracle多表连接查询操作时候经常挠头. 今天无意间发现了PL/SQL也有查询设计器,虽然没有sqlserver的强大好用,但足够用了. 在菜单栏 工具---& ...

  8. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 6_Logistic Regression 逻辑回归

    Lecture6 Logistic Regression 逻辑回归 6.1 分类问题 Classification6.2 假设表示 Hypothesis Representation6.3 决策边界 ...

  9. 19-从零玩转JavaWeb-继承关系与方法覆盖

    配套视频详解 继承子类与父类的关系 继承子类与父类的关系代码演示 继承方法的覆盖 方法覆盖原则 一.继承编写过程   二.子类可以继承父类当中哪些内容 可以自行把修饰符换下, 然后查看子类能不能访问 ...

  10. 解决mybatis中转义字符的问题

    xml格式中不允许出现类似“>”这样的字符,有如下两种解决方法 方法一:使用转义字符 SELECT * FROM test WHERE 1 = 1 AND start_date <= CU ...