select chosen 的入门使用
首先要引用
因为肯定要引用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 的入门使用的更多相关文章
- Jquery select chosen 插件注意点
<select style="width:200px;" name="carId" data-placeholder="选择车辆牌照" ...
- select chosen 禁用下拉框某一个option
$("#tbParBudCode option[value='" + budCodeId + "']").attr("disabled", ...
- jquery select chosen禁用某一项option
$("#tbParBudCode").chosen().change(function () { $("#tbParBudCode option[value='" ...
- jquery select chosen 动态绑定值
$("#ddlMstData").find("option[value=" + data.MstKey + "]").attr(" ...
- 下拉框select chosen被遮盖
最简单的就是让容器高度大点. 用js调整也行. 为什么z-index不管事,看下面... 浏览器支持 所有主流浏览器都支持 z-index 属性. 注释:任何的版本的 Internet Explore ...
- chosen组件实现下拉框
chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- jquery plugins —— Chosen
官网地址:http://harvesthq.github.io/chosen/ Chosen (v1.4.2) Chosen has a number of options and attribute ...
- chosen下拉框插件的使用
效果如下 第一步: 第二步: 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值. <link r ...
- JQueryUI Chosen插件
github地址:https://harvesthq.github.io/chosen/#change-update-events Using Chosen is easy as can be. Do ...
随机推荐
- mybatis~SQL映射
student.xml里面是这么写的: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE m ...
- Linux Restricted Shell Bypass
Author: @n4ckhcker & @h4d3sw0rm Introduction Hello, so first of all let’s explain what is a rest ...
- WEB扫描器Atscan的安装和使用
项目地址:https://github.com/AlisamTechnology/ATSCAN root@sch01ar:/sch01ar# git clone https://github.com/ ...
- Spring AOP基于注解的“零配置”方式实现
为了在Spring中启动@AspectJ支持,需要在类加载路径下新增两个AspectJ库:aspectjweaver.jar和aspectjrt.jar.除此之外,Spring AOP还需要依赖一个a ...
- 虚拟机之 Wordpress博客搭建
WordPress博客需要LAMP环境,--- LAMP 官网:https://cn.wordpress.org/ wordpress-4.4.1版本环境要求是: php 5.2.4或以上 mysq ...
- C++深度解析教程学习笔记(5)面向对象
1. 面向对象基本概念 (1)面向对象的意义在于 ①将日常生活中习惯的思维方式引入程序设计中 ②将需求中的概念直观的映射到解决方案中 ③以模块为中心构建可复用的软件系统 ④提高软件产品的可维护性和可扩 ...
- linux下配置tomcat开机自启动
Linux下配置tomcat开机自启动 1.写一个tomcat脚本,内容如下,设置其权限为755,放在/etc/init.d/目录下 #!/bin/bash## /etc/init.d/tomca ...
- java定时任务调度工具Timer与Quartz的区别
Timer与Quartz的区别有三点: 1.出身不同:Timer由jdk直接提供,调用方式简单粗暴,不需要其它jar包支持.Quartz并非jdk自带,需要引入相应的jar包 2.能力区别:主要体现在 ...
- 闲来无事,做做Google:21 道能力倾向测试面试题
1. Solve this cryptic equation, realizing of course that values for Mand E could be interchanged. No ...
- 1-3 并发与高并发基本概念.mkv