下拉框、下拉控件之Select2

下拉框、下拉控件之Select2

一、Select2的功能简介

select2插件给我们带来了更加友好的交互方式,比如查询控件展开后可通过关键字进行检索

例如:

    

    Select2也可以选择带查询控件的选择框…

    下拉框、下拉控件之Select2

Select2也可以选择带查询控件的选择框…

下拉框、下拉控件之Select2

    Select2更是支持多值选择框…

下拉框、下拉控件之Select2

 

二、如何使用Select2?

    2.1 通过CDN引用

     将以下两行代码添加到html页面,即完成了Select2的引入:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    注意:还需引入jquery支持select2的使用

    2.2 通过离线引用

        到Select2官网下载对应版本的库,通过工程的相对路径完成Select2的引入:

        2.2.1 引入js资源库

        Select2的库下载后放在工程的webapp—>js文件夹中,Select2库的文件名称是“select2.min.js”

        因此引入路径为:【/js/select2.min.js】下拉框、下拉控件之Select2

 

 

        2.2.2 引入css样式

 下拉框、下拉控件之Select2

 

三、Select2常用API

3.1 源码

 下拉框、下拉控件之Select2

 

    <span>区域:</span>
    <select id="area" class="select2">
        <option value="" selected="selected">请选择区域</option>
        <option value="1">珠海</option>
        <option value="2">深圳</option>
        <option value="3">澳门</option>
        <option value="4">香港</option>
    </select>

3.2 初始化select2

<script type="text/javascript">
//页面加载完成后初始化select2控件
$(function () {
$("#area").select2();
});
</script>
    select2()函数可添加相应配置:

$('#area').select2({
placeholder: '请选择区域'
});

  

3.3 选中控件id=”area”、value=”1″的元素

//初始化select2
var areaObj = $("#area").select2();
var optionVal = 1;
areaObj .val(optionVal).trigger("change");
areaObj .change();

下拉框、下拉控件之Select2

 

3.4获取、更改select的value值

    获取值:默认是获取当前控件选中元素对应的value值,参照3.1源码中,假设当前选中“珠海”,那么获取的value值就是1

$(“#area”).select2(‘val’);
    更改值:将val更改为756;默认是更改当前控件选中元素对应的value值,参照3.1源码中,假设当前选中“珠海”,那么更改后的value值就是756

$(“#area”).select2(‘val’,’756′);

原文:https://blog.csdn.net/weixin_36146275/article/details/79336158

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112369.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 菜鸟学SSH(十八)——Hibernate动态模型+JRebel实现动态创建表

    菜鸟学SSH(十八)——Hibernate动态模型+JRebel实现动态创建表

  • 自动下载forumdisplay.php,forumdisplay.php

    自动下载forumdisplay.php,forumdisplay.php/*[Discuz!](C)2001-2009ComsenzInc.ThisisNOTafreeware,useissubjecttolicenseterms$Id:forumdisplay.php169462008-11-2805:30:28Ztiger$*/define(‘CURSCRIPT’,’forumdisplay’);require_once’…

  • python进阶(6)深拷贝和浅拷贝「建议收藏」

    python进阶(6)深拷贝和浅拷贝「建议收藏」深拷贝和浅拷贝不管对于浅拷贝、还是深拷贝,针对不可变对象str、int、tuple(有点特殊)、boolean,它的内存地址是不变的,拷贝的仅仅是值importcopya=1b=co

  • CSS3 选择器

    CSS3 选择器CSS3选择器分为:结构型伪类选择器、UI元素状态伪类选择器,否定选择器,和伪元素一、结构型伪类选择器:first-child选择某个元素的第一个子元素; :last-child选择某个元素的最后一个子元素; :nth-child()选择某个元素的一个或多个特定的子元素; :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算; :…

  • nginx负载均衡并发量(应用服务器高并发解决方案)

    1.什么是负载均衡?当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能。那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台服务器的负载情况将请求分配给某一台后端服务器去处理。那么在这个过程中,调度者如何合理分配任务,保证所有后端服务器都将性能充分发挥,从而保持服务器集群的整体性能最优,这就是负载均衡问题。下…

  • 基于单片机的交通信号灯控制系统设计_交通信号灯程序编程

    基于单片机的交通信号灯控制系统设计_交通信号灯程序编程1、.设计任务交通信号灯控制系统:要求能显示剩余时间和控制红、黄、绿三色灯的显示。2、总体方案设计与方案论证(1)总体方案设计设计路口交通灯控制系统,使用LED显示单元的两组发光二极管(红黄绿)分别模拟十字路口的两组交通灯。a、南北路口的绿灯、东西路口的红灯同时亮20秒。数码管20秒倒记时显示。b、南北路口的黄灯亮5秒,同时东西路口的红灯继续亮。数码管5秒倒记时显示。c、南北

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号