下拉框、下拉控件之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)


相关推荐

  • python求逆矩阵的方法,Python 如何求矩阵的逆「建议收藏」

    python求逆矩阵的方法,Python 如何求矩阵的逆「建议收藏」我就废话不多说了,大家还是直接看代码吧~importnumpyasnpkernel=np.array([1,1,1,2]).reshape((2,2))print(kernel)print(np.linalg.inv(kernel))注意,Singularmatrix奇异矩阵不可求逆补充:python+numpy中矩阵的逆和伪逆的区别定义:对于矩阵A,如果存在一个矩阵B,使得A…

  • python安装的库在pycharm不显示_pycharm上无法安装各种库

    python安装的库在pycharm不显示_pycharm上无法安装各种库在使用pycharm安装库总是出现安装不成功的提示‘Non-zeroexitcode(2)’错误提示:最后找了很多方法都不能安装成功,最后发现可以降级pip就可以步骤:1、点击Terminal2、在里面输入“python-mpipinstallpip==20.2.4”对pip进行降级3、重新安装你需要的库或者模块…

  • mock测试工具

    mock测试工具什么是mock测试mock常见场景mock常用工具实战1,什么是mock测试mock测试就是对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法2,mock常见场景(1)无法控制第三方系统某接口的返回,返回的数据不满足要求(2)某依赖系统还未开发完成,就需要对被测系统进行测试3,mock常用工具(1)单元测试级别的mock工具:Easymock、jMock、Mockito、UnitilsMock、PowerMock、JMockit等(2)接口测试级别的.

  • LoRa学习:LoRa关键参数(扩频因子,编码率,带宽)的设定及解释

    LoRa学习:LoRa关键参数(扩频因子,编码率,带宽)的设定及解释LoRa学习:LoRa关键参数(扩频因子,编码率,带宽)的设定及解释1、扩频因子(SF)2、编码率(CR)3、信号带宽(BW)4、LoRa信号带宽BW、符号速率Rs和数据速率DR的关系5、LoRa信号带宽、扩频因子和编码率的设定6、空中速率针对特定应用,开发人员可通过调制扩频因子、调制带宽、纠错编码率这三个关键设计参数,对LoRa调制解调技术进行优化。。…

    2022年10月10日
  • 显示搜索dota2协调服务器,搜索dota2游戏协调服务器中【操作方式】

    显示搜索dota2协调服务器,搜索dota2游戏协调服务器中【操作方式】喜欢使用电脑的小伙伴们一般都会遇到win7系统搜索dota2游戏协调服务器中的问题,突然遇到win7系统搜索dota2游戏协调服务器中的问题就不知道该怎么办了,其实win7系统搜索dota2游戏协调服务器中的解决方法非常简单,按照1:DOTA2服务器蹦了之后,进入DOTA2,发现最顶端先是提示:“搜索DOTA2协调服务器中…”2:然后就是显示:“正在连接至DOTA2游戏协调服务器…”来操作就行了,…

  • python2与python3中input的区别

    python2与python3中input的区别python2与python3的区别:1、input:python2中input需要用户指定输入的类型,以下代码体现了这点2、python2中的raw_input与python3中的input

发表回复

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

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