直接上效果图:
以上效果为:可选择多个内容放在框里,再作相应操作将内容传给后端
一、在html的body的form表单下码一个div
<form >
<div style="display: inlinflex;">
<label>供电局</label>:
<div id="selectGdj" class="mySelect"></div>
</div>
<input type="hidden" name="gdj" id="gdj" />
</form>
二、引入js和css文件(这两个文件在第三点写)
<html>
<head>
<script type="text/javascript" src="你自己在webapp下创建的路径/select.js"></script>
<link rel="stylesheet" href="你自己在webapp下创建的路径/select.css" type="text/css">
</head>
<body>
<form >
<div style="display: inlinflex;">
<label>供电局</label>:
<div id="selectGdj" class="mySelect"></div>
</div>
<input type="hidden" name="gdj" id="gdj" />
</form>
</body>
<html>
三、select.js和select.css文件(我忘了在哪里找到大佬写的这两个文件,找不到链接了,十分感谢,如各位大佬知道,可直接将链接放在评论区)
1.select.js文件
/**
* 用这个文件的时候你同时也得引入jQuery
* 这是select.js文件
*/
(function ($) {
var mySelect=function(ele,options){
this.ele=ele;
this.defaults={
mult:false
};
this.options=$.extend({},this.defaults,options);
this.result=[];
};
mySelect.prototype={
init:function(){
this.pubFunction();
this.initOption();
this.closeSelectEvent();
this.addEvent();
},
closeSelectEvent:function(){
var that=this;
this.ele.find(".inputWrap").on("click",function(event){
event.stopPropagation();
if(that.ele.find(".inputWrap>i").hasClass("fa-angle-down")){
that.ele.find(".inputWrap>i").removeClass("fa-angle-down").addClass("fa-angle-up");
that.ele.find(".mySelect-option").animate({height:"400px",opacity:"1"},"fast","swing")
}else{
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height:"0",opacity:"0"},"fast","swing")
}
});
$("html").on("click",function(){
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height:"0",opacity:"0"},"fast","swing")
})
},
pubFunction:function(){
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return i;
}
}
return false;
}
},
initOption: function () {
this.ele.append('<div class="inputWrap"><ul></ul><i class="fa fa-angle-down"></i></div>');
this.ele.append('<div class="mySelect-option"></div>');
for(var i= 0;i<this.options.option.length;i++){
this.ele.find(".mySelect-option").append('<div data-value="'+this.options.option[i].value+'"><span>'+this.options.option[i].label+'</span><i class="fa fa-check"></i></div>')
}
},
addEvent:function(){
var that=this;
this.ele.find(".mySelect-option").find("div").on("click", function (event) {
event.stopPropagation();
if(that.options.mult){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
that.result.splice(that.result.contains($(this).attr("data-value")),1)
}else{
$(this).addClass("selected");
that.result.push($(this).attr("data-value"))
}
that.refreshInput();
}else{
if($(this).hasClass("selected")){
$(this).removeClass("selected");
that.result='';
}else{
that.ele.find(".mySelect-option").find("div").removeClass("selected");
$(this).addClass("selected");
that.result=$(this).attr("data-value");
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height:"0",opacity:"0"},"fast","swing")
}
that.refreshInput($(this).find("span").text());
}
that.options.onChange(that.result)
});
},
inputResultRemoveEvent:function(){
var that=this;
this.ele.find(".inputWrap ul li i").on("click",function(event){
event.stopPropagation();
that.result.splice(that.result.contains($(this).attr("data-value")),1);
that.refreshInput();
that.removeOptionStyle($(this).attr("data-value"));
that.options.onChange(that.result);
})
},
removeOptionStyle:function(val){
this.ele.find(".mySelect-option").find("div").each(function(){
if($(this).attr("data-value")==val){
$(this).removeClass("selected")
}
})
},
refreshInput:function(label){
this.ele.find(".inputWrap ul").empty();
if(this.options.mult){
for(var i=0;i<this.options.option.length;i++){
for(var j=0;j<this.result.length;j++){
if(this.result[j]==this.options.option[i].value){
this.ele.find(".inputWrap ul").append('<li><span>'+this.options.option[i].label+'</span>,<i data-value="'+this.options.option[i].value+'" class="fa fa-close"></i></li>')
}
}
}
}else{
if(this.result==''){
this.ele.find(".inputWrap ul").empty()
}else{
this.ele.find(".inputWrap ul").append('<li><span>'+label+'</span>,</li>')
}
}
this.inputResultRemoveEvent();
},
setResult:function(res){
this.result=res;
if(this.options.mult){
if(res instanceof Array){
this.refreshInput();
this.ele.find(".mySelect-option").find("div").each(function(){
for(var i=0;i<res.length;i++){
if($(this).attr("data-value")==res[i]){
$(this).addClass("selected")
}
}
})
}else{
alert("这是啥提示,乱码了��������������")
}
}else{
for(var i=0;i<this.options.option.length;i++){
if(this.options.option[i].value==res){
this.refreshInput(this.options.option[i].label)
}
}
this.ele.find(".mySelect-option").find("div").each(function(){
if($(this).attr("data-value")==res){
$(this).addClass("selected")
}
})
}
},
getResult:function(){
return this.result;
}
};
$.fn.mySelect=function(options){
var select=new mySelect(this,options);
select.init();
return select;
};
})(jQuery);
2.select.css文件
.ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td{
white-space: normal !important;
height:auto;
}
.mySelect {
position: relative;
}
.mySelect .inputWrap {
width: 180px;
min-height: 35px;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
cursor: pointer;
background-color: #FFF
}
.mySelect .inputWrap>i {
position: absolute;
padding: 13px;
right: 0;
top: 0;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-angle-up:before {
content: "\f106";
}
.mySelect .mySelect-option {
width: 180px ;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: scroll;
position: absolute;
height: 0;
opacity: 0;
z-index: 2;
background-color: #fff;
}
.fa-check:before {
content: "";
}
.fa-close {
cursor: pointer;
}
.mySelect-option div:hover {
background: #e2e7ee;
color: #9ec6ff;
border-bottom: 1px solid #9ec6ff;
opacity: 1;
}
.mySelect-option div.selected {
background: #237eff;
color: #ffffff;
border-radius: 5px;
}
四、接下来进行js代码编写
<html>
<head>
<script type="text/javascript" src="你自己在webapp下创建的路径/select.js"></script>
<link rel="stylesheet" href="你自己在webapp下创建的路径/select.css" type="text/css">
<script type="text/javascript">
$(function(){
var selectGdj = $("#selectGdj").mySelect({
mult: true, //true为多选,false为单选
option: [ //选项数据
{label: "海口供电局",value: "海口供电局"},
{label: "三亚供电局",value: "三亚供电局"},
{label: "儋州供电局",value: "儋州供电局"},
{label: "琼海供电局",value: "琼海供电局"},
{label: "文昌供电局",value: "文昌供电局"},
{label: "万宁供电局",value: "万宁供电局"},
{label: "澄迈供电局",value: "澄迈供电局"},
{label: "定安供电局",value: "定安供电局"},
{label: "屯昌供电局",value: "屯昌供电局"},
{label: "陵水供电局",value: "陵水供电局"},
{label: "临高供电局",value: "临高供电局"},
{label: "昌江供电局",value: "昌江供电局"},
{label: "东方供电局",value: "东方供电局"},
{label: "五指山供电局",value: "五指山供电局"},
{label: "保亭供电局",value: "保亭供电局"},
{label: "乐东供电局",value: "乐东供电局"},
{label: "琼中供电局",value: "琼中供电局"},
{label: "白沙供电局",value: "白沙供电局"},
{label: "三沙供电局",value: "三沙供电局"}
],
onChange: function(res) { //选择框值变化返回结果
console.log(res)
}
});
});
function 触发函数自己命名(){
var gdjData=$("#selectGdj").find('li').text();//选择多向内容后,数据是在li列表里面的,要遍历把数据拿出来做处理
$("#gdj").val(gdj.substr(0,gdj.length-1));
//下一步往后端传数据,ing...
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="触发函数自己命名();"><span>搜索</span></a>
<form >
<div style="display: inlinflex;">
<label>供电局</label>:
<div id="selectGdj"></div>
</div>
<input type="hidden" name="gdj" id="gdj" />
</form>
</body>
<html>