淘宝客导购网站怎么做,台州网络推广,娄底网站设计,wordpress管理系统本文采用的是select2 版本#xff1a;Select2 4.0.6-rc.1。
可以兼容IE8及以上。亲测过。
官网#xff1a;Getting Started | Select2 - The jQuery replacement for select boxes
一、认识select2.js
1、使用插件#xff0c;首先要引入别人的插件了#xff0c;你可以选…本文采用的是select2 版本Select2 4.0.6-rc.1。
可以兼容IE8及以上。亲测过。
官网Getting Started | Select2 - The jQuery replacement for select boxes
一、认识select2.js
1、使用插件首先要引入别人的插件了你可以选择离线无网络或者在线引用的如果有网络。
在线引用如下所示
link hrefhttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css relstylesheet /
script srchttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js/script离线引用如下所示注意自己的引用路径哦
link typetext/css relstylesheet href../../plugins/select2/css/select2.min.css
script typetext/javascript src../../plugins/select2/js/select2.js/script
2、先将弹出框做出来你可以模拟数据或者从后台将数据查询出来进行操作。
!-- 选择你想要的那条数据哦 --
div iddbName styledisplay: none;form classform-horizontal setWidth iddbNameContent namedbNameContentdiv classform-group stylewidth: 90%label fordbNameCategory classcol-sm-3 control-labelxxx库font colorred✲/font/labeldiv classcol-sm-9 stylepadding: 0px;select classform-control width175 iddbNameCategory namedbNameCategoryoption value0-- 请选择 --/option/select/div/div/form
/div
将弹出框先做出来然后呢。弹出框里面的数据我是从后台查询出来的放到select选择框里面的你可以根据自己的需求来做哦。 3、初始化select2。
script typetext/javascript
$(function(){$.ajax({type : post,url : xxxAction!findxxx.action,dataType : json,error : function(request, textStatus,errorThrown) {fxShowAjaxError(request, textStatus,errorThrown);},success : function(data) {//console.log(data.result);var result data.result;for(var i0;iresult.length;i){$(#dbNameCategory).append(option value result[i].id result[i].alias /opstion);}}})//初始化select2关键点在于将select下拉框里面的id进行定义然后初始化select2$(#jobdbNameCategory).select2();
});
/script
更多其他的功能可以根据自己的需求进行开发使用。
4、模拟的使用select2插件进行下拉框来进行自动补全。
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
title基本实例/title
!--
link hrefhttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css relstylesheet /
script srchttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js/script
--link hrefcss/bootstrap.min.css relstylesheet /
script srcjs/jQuery-2.1.3.min.js/script
link typetext/css relstylesheet hrefcss/select2.min.css
script typetext/javascript srcjs/select2.min.js/scriptscript typetext/javascript//页面加载完成后初始化select2控件$(function () {$(#area).select2();});// select2()函数可添加相应配置$(#area).select2({placeholder: 请选择区域});//选中控件idarea、value1的元素function findByName(){//初始化select2var areaObj $(#area).select2();var optionVal 1;areaObj .val(optionVal).trigger(change);areaObj .change();}/script
/head
bodydiv aligncenter stylepadding-top:100px;
span省份或直辖市/spanselect idarea classselect2 stylewidth:300px;option value0 selectedselected请选择区域省或直辖市/optionoption value1浙江省/optionoption value2广东省/optionoption value3上海市/optionoption value4贵州省/optionoption value5江苏省/optionoption value6山东省/optionoption value7重庆市/optionoption value8四川省/optionoption value9安徽省/optionoption value10北京市/optionoption value11天津市/optionoption value12河北省/optionoption value13山西省/optionoption value14内蒙省/optionoption value15辽宁省/optionoption value16吉林省/optionoption value17黑龙江省/optionoption value18福建省/optionoption value19江西省/optionoption value20河南省/optionoption value21湖北省/optionoption value22湖南省/optionoption value23广西省/optionoption value24海南省/optionoption value25云南省/optionoption value26西藏省/optionoption value27陕西省/optionoption value28甘肃省/optionoption value29青海省/optionoption value30宁夏省/optionoption value31新疆省/option/select
/div/body
/html
效果如下所示
二、遇到的问题
本人新手初次使用select2组件遇到很多难题记录下来。
select idselectID/select
问题1如何获取select2已选择的数值
答案 $(#selectID).select2(data); 问题2如何给select2赋值
答案 $(#selectID).val(new_value).select2(); 问题3如何重新初始化select2选项比如动态获取数据然后更新select2数据
答案 $(#selectID).empty(); $(#selectID).select2({ tags: true, placeholder: 请选择版本, data: data, multiple:true, allowClear: true }) 问题4如何获取select2选中的选项的属性比如id
答案 $(selectID).find(option:checked).attr(id); 三、常用功能说明
1.常用参数设置含义
tags: true, // 根据搜索框创建option默认false
maximumSelectionLength: 6, // 最多能够选择的个数
multiple: true, // 多选默认false
data: initdata, // 下拉框绑定的数据
allowClear: true, // 清空默认false
placeholder: 请添加或选择语言 // 占位提示符
maximumInputLength: 20, // 允许搜索长度
minimumResultsForSearch: 20, // 至少20个结果的时候显示搜索
minimumResultsForSearch: Infinity, // 永久隐藏搜索框
selectOnClose: true, // 结果显示高亮
closeOnSelect: false, // select选中关闭下拉框
separator: ,, // 分隔符
2.select2事件
//置空
$eventSelect.val(null).trigger(change);
//选中
$eventSelect.on(selected, function (e) { })
//移除
$eventSelect.on(removed, function () { })
//多个事件
$eventSelect.on(close removed, function () { })
3.获取value和text
$(#xa).val();
$(#xa).select2(val);
$(#xa).select2(data).text ;
四、测试源码示例
1.select2Test.html代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /titleselect2/title
/head
bodylink href../../plugins/select2/css/select2.css relstylesheet /divlabel stylewidth: 100px; font-size: 14px;单选/labelselect idsel_menu stylewidth: 400px; option value/option/select/divdiv stylemargin-top:20px;label style width: 100px; font-size: 14px;多选/labelselect idsel_menu2 multiplemultiple stylewidth: 400px;/select/divdiv stylemargin-top:20px;label stylewidth: 100px; font-size: 14px;多选(含选中项)/labelselect idsel_menu3 multiplemultiple stylewidth: 400px;/select/divbutton onclickgetSelectedData() style margin-top: 20px;多选选中值/buttonscript src../../plugins/jquery-2.0.3.min.js/scriptscript src../../plugins/select2/js/select2.js/scriptscript src../../plugins/pinyin/pinyin.js/scriptscript src../../js/select2Test.js/script
/body
/html
2.select2Test.js代码
//下拉框数据
var initdata [Java, JavaScript, C, C#, Python, PHP];
//选中数据
var selectedData [Java, PHP];//初始化页面加载
$(document).ready(function () {//初始化select2单选initSelect2WithSearch();//初始化select2多选没有选中项initSelect2();//初始化select2多选包含选中项select2WithData(selectedData);
});/*** 初始化select2单选默认带搜索功能。*/
function initSelect2WithSearch() {$(#sel_menu).select2({tags: true,placeholder: 请搜索或选择语言,data: initdata,allowClear: true});
}
/*** 初始化select2多选没有选中项*/
function initSelect2() {$(#sel_menu2).select2({tags: true,maximumSelectionLength: 5,placeholder: 请添加或选择语言,multiple: true,maximumInputLength: 10,//允许长度 data: initdata,});
}/*** 初始化select2多选包含选中项*/
function select2WithData(selectedData) {$(#sel_menu3).select2({tags: true, //支持新增默认为falsemaximumSelectionLength: 6, //最多能够选择的个数multiple: true, //支持多选默认为falsedata: initdata, //下拉框绑定的数据allowClear: true, //支持清空默认为falseplaceholder: 请添加或选择语言 //提示语}).val(selectedData).trigger(change); //多选情况下给选中项的赋值
}/*** 获取多选框选中项的值*/
function getSelectedData() {var mulSelData $(#sel_menu3).val().join(,);//获取多选输入框选中值的方式alert(sel_menu3的选中项是 mulSelData);
}
3.运行结果
参考Select2.js学习总结 - 程序员大本营 (pianshen.com) 亲测代码
%--Created by IntelliJ IDEA.Date: 2023/11/29Time: 23:57To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/titlescript typetext/javascript src../js/jquery-1.8.3.min.js/scriptscript typetext/javascript src../js/select2.js/scriptlink relstylesheet href../css/select2.cssstyle.input-select,.select2{width:200px;}/style
/head
bodyselect idab classinput-selectoption value 请选择数据/optionoption valueaaaaaaa/optionoption valuebbbbbbb/option/selectbrspan区域/spanselect idarea classselect2option value selectedselected请选择区域/optionoption value1珠海/optionoption value2深圳/optionoption value3澳门/optionoption value4香港/option/select/body
/htmlscript$(document).ready(function(){$(.input-select).select2({allowClear:true,placeholder: 请添加或选择语言});
});
/scriptscript typetext/javascript//页面加载完成后初始化select2控件$(function () {//select2()函数可添加相应配置$(#area).select2({placeholder: 请选择区,allowClear:true});//初始化select2/* var areaObj $(#area).select2();var optionVal 1;areaObj.val(optionVal).trigger(change);areaObj.change();*/});/script效果图
