关于前端在一个选择框中选择多个内容的操作

励志成为java小白的小白

已于 2022-08-26 11:18:07 修改

阅读量1.3k

点赞数 1

文章标签：前端 javascript

于 2022-08-26 11:11:30 首次发布

本文链接：https://blog.csdn.net/m0_60312879/article/details/126537277

版权

直接上效果图：

以上效果为：可选择多个内容放在框里，再作相应操作将内容传给后端

一、在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>