下拉框插件select2的使用
它的优点有:
样式还算好看,支持多选,支持索搜
下面来介绍下select2的用法
1.最简单的用法
只需要加载css和js即可使用
<select name="" id="test" style="width: 100px;">
<option value="0">java</option>
<option value="1">c</option>
<option value="2">php</option>
<option value="3">python</option>
<option value="4">javascript</option>
</select>
<script type="text/javascript">
$("#test").select2();
</script>
再来张效果图

注意:这个 放大镜(搜索图)需要放在和css,js同级
2.支持多选
加上一个 multiple='mutiple'的属性就好了
<select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">
<option value="0">java</option>
<option value="1">c</option>
<option value="2">php</option>
<option value="3">python</option>
<option value="4">javascript</option>
</select>

3.国际化(多语言)
默认是英文的提示
我们需要引入中文js
然后
$("#test").select2({
language: "zh-CN"
});
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
<link rel="stylesheet" href="select2/select2.css">
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script src="select2/select2.js"></script>
<script type="text/javascript" src="select2/select2_locale_zh-CN.js"></script>
</head>
<body>
<select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">
<option value="0">java</option>
<option value="1">c</option>
<option value="2">php</option>
<option value="3">python</option>
<option value="4">javascript</option>
</select>
<script type="text/javascript">
$("#test").select2({
language: "zh-CN"
});
</script>
</body>
</html>

3.默认赋值
$("#test").val([1,2,3]).trigger('change');
这样给select赋值,支持多项
链接:https://www.jianshu.com/p/60831ea22a1b
下拉框插件select2的使用的更多相关文章
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jQuery无限级联下拉框插件
自己编写jQuery插件 之 无限级联下拉框 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...
- select下拉框插件jquery.editable-select
项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- 浅解bootstrap 下拉框插件
最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件 渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu ...
随机推荐
- Scrapy 框架 手动发送请求 POST 请求的发送
手动发送请求 import scrapy from choutiSpider.items import ChoutispiderItem class ChoutiSpider(scrapy.Spide ...
- docker学习笔记(三)-通过network理解docker,在同一网桥里搭建docker容器
创建test1 test2 两个network namespace 两个network namespace没有被启动 启动了但是有没有与network关联 创建两个veth,用于关联两个network ...
- P2360 地下城主(BFS)
感觉这道题还是蛮简单的,不过使使用了4个队列(其实只是一个)emmmmm,还是很好的 #include<iostream> #include<string> #include& ...
- freopen
一定要记住哇 求求你了 记住吧 freopen("balabala.in","r",stdin); freopen("balabala.out&quo ...
- ubuntu部分端口命令的使用----开启端口/开启防火墙
环境系统: ubuntu 工具:xshell + virtualbox 1.测试远程主机的端口是否开启(windows命令行下执行) telnet 192.168.1.103 80 远程访问主机的80 ...
- UIImageView - BNR
继续上节UINavigationController - BNR. 打开BNRDetailViewController.xib文件,向view中添加UIImageView对象,选中该对象,通过Attr ...
- IT面试技巧终身受益
面试前的准备 首先我们要穿的得体,因为第一印象对一个面试官来说真的很重要,如果我们面试的时候都不能以一种非常认真的态度去对待,那么可想而知其实我们离面试成功的路渐行渐远,当然这只是说第一印象,并不能代 ...
- 波音,自动驾驶bug未修复,致346人丧生!5个月内两次坠毁!其中,包括8名中国公民
一,波音737 MAX再次坠毁 继2018年10月29日,印尼波音737MAX飞机坠入爪哇海,导致178名乘客不幸遇难后,时隔不足5月,上周日,埃塞俄比亚航空公司一架波音737MAX客机在飞往肯尼亚途 ...
- Jmeter实例(一)_Beanshell脚本断言Mock接口
我们在做接口断言的时候,如果遇到复杂的json,可以考虑用beanshell脚本去解析list,同时加入自定义的断言 Mock例:https://www.easy-mock.com/mock/5cb4 ...
- LeetCode 657. Robot Return to Origin
There is a robot starting at position (0, 0), the origin, on a 2D plane. Given a sequence of its mov ...