首先要引用

因为肯定要引用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. C++11 类的六个默认函数及其使用

    六个默认函数: 构造函数(construct) 析构函数(destruct) 复制构造函数(copy construct) 赋值(assign) 移动构造函数(move construct) 移动赋值 ...

  2. 关于Unity发布iOS平台代码混淆问题

    之前在越狱手机里找到<永恒战士3>的程序发现是用Unity做的,拷出资源出来看的时候发现里面有游戏程序集,立马抽出来反编译了一下,发现里面的代码只有方法签名,没有方法体,还以为用什么高端混 ...

  3. 如何正确且成功破解跨平台数据库管理工具DbVisualizer?(图文详解)

    前期博客 基于JDBC的跨平台数据库管理工具DbVisualizer安装步骤(图文详解)(博主推荐) 上图,所示,说明这个还只是免费版而已,没又破解为Pro版本. 接下来,就是带领大家如何正确且成功破 ...

  4. 「小程序JAVA实战」 小程序抽离公用方法进行模块化(12)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-12/ 小程序的模块化,把砖磊成一个墩子,用的时候把整个墩子移走.js更好的调用,应用更加公用化.源 ...

  5. sklearn 中 make_blobs模块

    # 生成用于聚类的各向同性高斯blobsklearn.datasets.make_blobs(n_samples = 100,n_features = 2,center = 3,cluster_std ...

  6. java Web EL表达式详解

    1.EL表达式的简介 EL表达式是一种JSP技术,能够代替JSP中原本要用Java语言进行显示的语句,使得代码更容易编写与维护.最基本的语法是${express}. 2.获取并显示数据 从四个域中通过 ...

  7. 数据库SQL优化大总结之 百万级数据库优化方案 【转载】

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...

  8. Professional C# 6 and .NET Core 1.0 - Chapter 37 ADO.NET

    本文内容为转载,供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET 译文:C# 6 与 .NE ...

  9. 使用递归函数,输出n个元素的所有子集

    题目描述: 请编写一个递归函数,用来输出n个元素的所有子集.例如,三个元素{a,b,c}的所有子集是:{},{a},{b},{c},{a,c},{ac},{b,c},{a,b,c}. 解题思路: 根据 ...

  10. Java-Http

    1 import java.io.BufferedReader; 2 import java.io.BufferedWriter; 3 import java.io.IOException; 4 im ...