动态下拉动态下拉动态下拉动态下拉动态下拉动态下拉动态下拉

动态规划

需积分: 5 166 浏览量 2022-03-12 13:47:09 上传评论收藏 3KB GZ 举报

共2个文件

html：1个

js：1个

资源详情

资源评论

资源推荐

收起资源包目录

动态下拉.tar.gz （2个子文件）

select.js 7KB

index.html 7KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选和单选下拉框（原创）</title> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <style> html{ /*height: 100%;*/ } body{ padding: 100px; /*height: 100%;*/ } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track-piece { background-color: #ebebeb; -webkit-border-radius: 4px; } ::-webkit-scrollbar-thumb:vertical { height: 32px; background-color: #ccc; -webkit-border-radius: 4px; } ::-webkit-scrollbar-thumb:horizontal { width: 32px; background-color: #ccc; -webkit-border-radius: 4px; } ul,li{padding: 0;margin: 0} .mySelect{ position: relative; } .mySelect .inputWrap{ width:100%; min-height: 40px; border: 1px solid #ccc; border-radius: 3px; position: relative; cursor: pointer; } .mySelect ul{ padding:0 5px ; margin: 0; padding-right: 35px; } .mySelect ul,li{ list-style: none; } .mySelect li{ display: inline-block; background: #eaeaea; padding: 5px; margin: 5px 5px 5px 0; border-radius: 5px; } .mySelect .fa-close{ cursor: pointer; } .mySelect .fa-close:hover{ color: #237eff; } .mySelect .mySelect-option{ width: 100%; border: 1px solid #ccc; max-height: 200px; overflow-y: scroll; position: absolute; height: 0; opacity: 0; } .mySelect .mySelect-option div{ padding: 10px; } .mySelect .inputWrap>i{ position: absolute; padding: 13px; right: 0; top: 0; } .mySelect-option div{ cursor: pointer; border-bottom: 1px solid #e7e7e7; margin: 5px; } .mySelect-option div i{ float: right; color: #ffffff; } .mySelect-option div.selected{ background: #237eff; color: #ffffff; border-radius: 5px; } .mySelect-option div:hover{ /*background: #9ec6ff;*/ color: #9ec6ff; border-bottom: 1px solid #9ec6ff; } </style> </head> <body> <div style="float: left;position: relative">  多选  </div> <input class="selectpage" mult="mult" data-source="/admin/auth.group/index" data-field="name" data-primary-key="id" style="display:none" value="1"> <div class="mySelect" style="width: 250px;float: left;margin-left: 10px"></div> <div style="float: left;position: relative">  单选  </div> <input class="selectpage" data-source="/admin/auth.group/index" data-field="name" data-primary-key="id" style="display:none" > <div class="mySelect" style="width: 250px;float: left;margin-left: 10px"></div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/select.js"></script> <script> $(function(){ var mySelect=[]; $(".selectpage").each(function(index) { // $('body').on('click', '.time', function (e) { var id = $(this).prop('id'); var thisz = $(this) ; var name = $(this).attr('name'); var datasource = $(this).attr('data-source'); var datafield = $(this).attr('data-field'); var dataprimarykey = $(this).attr('data-primary-key'); var mult= $(this).attr('mult'); var datavar = $(this).val(); if(mult==''){ mult=false; } var option=[] option.push( {label:"请选择",value:0}); $.ajax({ type: 'post', url: "http://real-think.jmwl51.com/admin/auth.group/index", //删除接口 dataType: 'json', async:false, data: { ids: datavar }, headers: { 'token': 'fb4b2b3c-66d0-42ee-adc9-f6e5496074d0' }, success: function(data) { if (data.code == 1) { // option= data.data.rows $.each(data.data.rows,function(index,item){ //其中index是指数组的下标，item指相对应的数组; // var items =; option.push({label:item[datafield],value:item[dataprimarykey]}); // option[index]=items; }) } else if (data.code == '10501') { layer.msg(data.message); } else { layer.msg(data.msg); } }, error: function() { } }) mySelect[name]=$(this).next(".mySelect").mySelect({ mult:mult,//true为多选,false为单选 option:option, onChange:function(res,ele){//选择框值变化返回结果 if(mult){ res=res.join(",") } console.log(res) ele.prev(".selectpage").val(res); console.log( ele.prev(".selectpage").val()) } }); //js把字符串分割成数组 var strs= new Array(); //定义一数组 strs=datavar.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { console.log(strs[i]) } if(strs==''){ strs=[0] } // console.log(option,option2); mySelect[name].setResult(strs); }) // var mySelect2= $("#mySelect2").mySelect({ // mult:false, // option:[ // {label:"选项1",value:0}, // {label:"选项2",value:1}, // {label:"选项3",value:2}, // {label:"选项4",value:3}, // {label:"选项5",value:4}, // {label:"选项6",value:5} // ], // onChange:function(res){ // console.log(res) // } // }); // mySelect2.setResult(3); }) </script> </body> </html>