官网  (http://select2.github.io/examples.html)
<!--引入select2需要的文件-->
<script type="text/javascript" src="select2.full.js"></script>
<link href="select2.min.css" type="text/css" rel="stylesheet" /> <!--可搜索可编辑的select-->
<select class="js-example-placeholder-multiple-one js-states form-control" multiple="multiple" style="display: none;">
<!--multiple="multiple"可以多值选择-->
<option value=""> </option>
<option value="">北京蜂</option>
<option value="">北京</option>
<option value="">小章额为氛围分为</option>
<option value="entertainment">entertainment</option>
<option value="and">and</option>
</select>
<script>
$(".js-example-placeholder-multiple-one").select2({
placeholder: "请选择", //默认input 文字
maximumSelectionLength: 1, //多值选择框可以设置所选择的最大选项数的限制(只能选择其中一项)
tags: true //创建新标签,在文本框输入值 });
</script> <!--只可搜索的select-->
<select class="js-example-placeholder-multiple-two js-states form-control" multiple="multiple" style="display: none;">
<!--multiple="multiple"可以多值选择-->
<option value=""> </option>
<option value="">北京蜂</option>
<option value="">北京</option>
<option value="">小章额为氛围分为</option>
<option value="entertainment">entertainment</option>
<option value="and">and</option> </select>
<script>
$(".js-example-placeholder-multiple-two").select2({
placeholder: "请选择", //默认input 文字
maximumSelectionLength: 1, //多值选择框可以设置所选择的最大选项数的限制(只能选择其中一项)
tag:false //不允许编辑 }); </script> <!--select触发事件 当下拉框值有变化的时候 可参考http://www.cnblogs.com/harryGao65535/p/7003138.html-->
$(function(){
$('.js-example-placeholder-multiple-one').on('change',function(e){ //事件 }
}) select2下拉 总结事件
http://www.cnblogs.com/liuxiaobo93/p/5112993.html?utm_source=tuicool&utm_medium=referral

select2 下拉搜索 可编辑可搜索 / 只可搜索的更多相关文章

  1. select2下拉插件

    下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...

  2. 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  3. 使用 Select2 下拉框实现复选

    使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  4. angular select2 下拉单选和多选的取值赋值

    官网:http://select2.github.io/examples.html 兼容性: 引入文件 /select2.min.js /select2.min.css html <select ...

  5. Select2下拉框总结

    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...

  6. Select2下拉选项库 部分积累

    用了这么久的Select2插件,也该写篇文章总结总结. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本. 官网:http:/ ...

  7. select2下拉内容获取后台数据

    controller(id给select:text给另外的input框) @RequestMapping(value = "findUnit")public @ResponseBo ...

  8. select2 下拉搜索控件

    1.添加相应的script链接 jquery: <script type="text/javascript" src="http://cdn.bootcss.com ...

  9. jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)

    第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...

随机推荐

  1. “全栈2019”Java第一百零一章:局部内部类覆盖作用域内成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. [CSS3] 3D桃心

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Make ISO安装ArchLinux加Cinnamon

    Arch安装一直对大家对普通用户来說一直很难.国外大神为Arch安装进行了优化提供了更方便的安装方式 官网:http://www.evolutionlinux.com/ 以下爲个人理解,供大家参考. ...

  4. CentOS6.5下telnet服务

    00×0 本文介绍Telnet搭建,以及展示这是一个不安全的远程服务. 00×1 服务准备工作 [root@localhost ~]# yum install xinetd telnet-server ...

  5. P3698 [CQOI2017]小Q的棋盘

    题目链接 题意分析 首先 我们肯定会贪心的走从根节点到叶子结点最长的一条链 首先没有过剩的就好办了 但是有的话 我们就一边往下走 一边走分支 分支上每一个点平均走过两次 所以我们把剩下的除以\(2\) ...

  6. jquery插件制作,下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  7. Vue 不睡觉教程2 - 洋气的文件结构

    目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...

  8. 工具篇-大数据组件的一些快捷Shell操作

    一.Hbase 1. HBase shell窗口进入 执行hbase shell 2. HBase表的创建 # 语法:create <table>, {NAME => <fam ...

  9. Compile git version inside go binary

    Compile git version inside go binary Abstract 在我们编写的程序中总是希望可以直接查阅程序的版本,通过--version参数就会输出如下版本信息. Buil ...

  10. destoon调用方法汇总 ---转载

    根目录.模板目录和样式目录:{DT_PATH}{DT_SKIN}导入头脚:{template 'header'}{template 'footer'}对应模块首页:{$MODULE[$moduleid ...