下拉框、下拉控件之Select2

下拉框、下拉控件之Select2_第1张图片

一、Select2的功能简介

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

例如:

    下拉框、下拉控件之Select2_第2张图片

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

    下拉框、下拉控件之Select2_第3张图片

    下拉框、下拉控件之Select2_第4张图片

    Select2更是支持多值选择框...

    下拉框、下拉控件之Select2_第5张图片


二、如何使用Select2?

    2.1 通过CDN引用

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


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

    2.2 通过离线引用

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

        2.2.1 引入js资源库

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

        因此引入路径为:【/js/select2.min.js

下拉框、下拉控件之Select2_第6张图片

        2.2.2 引入css样式

下拉框、下拉控件之Select2_第7张图片

三、Select2常用API

3.1 源码

下拉框、下拉控件之Select2_第8张图片

    区域:
    

3.2 初始化select2

    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_第9张图片


3.4获取、更改select的value值

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

 $("#area").select2('val');

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

 $("#area").select2('val','756');

你可能感兴趣的:(Select2,下拉框,前端控件)