var selectData={};//下拉列表總數據/** * 下拉搜索，多選擇等 */$.fn.selectDataFun=function (json) {  selectData[$(this).attr("id")]={thisDom:null,initData:null,jsonData:null,htmlText:null,    isShow:true,selectElements:true,overStat:true,checkedElementIds:''};  thisSelectFun($(this)).thisDom=$(this);//設置索引為id，值為本身對象  thisSelectFun($(this)).initData=json;//初始數據為json/*  var isShow=true;//是否顯示  var selectElements;//選擇的選項  var overStat=true;//鼠標經過的狀態  var checkedElementIds='';//選中項的id*/  //根據字段生成html代碼  setFieldTypeFun($(this));  //請求后臺數據  getSelectDataFun($(this));  //生成下拉列表  thisSelectFun($(this)).htmlText = createSelectFun($(this));//htmlText為緩存的html代碼  //調用總方法  callMethodFun($(this));}//根據對象id值獲取對象數據function thisSelectFun(thisD) {  if(thisD.attr("id")==''){    alert("id值為空");    return null;  }  return selectData[thisD.attr("id")]}//根據對象字段生成html代碼function setFieldTypeFun(thisD){  var thisId=thisD.attr("id");  var fields = selectData[thisId].initData;//以id獲取該對象的所有數據  //生成html代碼  var title=fields.title;  var inputId=fields.inputId;  var selectHtml='<div class="layui-form-select">'+'<div class="layui-select-title">'+      '<input type="hidden" id="'+inputId+'" name="'+inputId+'" />'+    '<span>'+title+'：</span>'+' '+'<input id="'+thisD.attr("id")+'Search" value="" hiddenValue="" class="form-control input-sm" type="text">'+    '<i class="layui-edge"></i>'+'</div>'+'<dl class="layui-anim layui-anim-upbit" id="'+thisD.attr("id")+'dl" style=""></dl>'+    '</div>';  thisD.append(selectHtml);}//請求后臺數據function getSelectDataFun(thisD) {  var fields = selectData[thisD.attr("id")].initData;//以id獲取該對象的所有數據  //判斷數據ajaxUrl中是否含有url字段  if(fields.ajaxUrl.hasOwnProperty('url')){    //以請求路徑為url請求后臺數據，并賦值給jsonData    thisSelectFun(thisD).jsonData=ajaxFunss(fields.ajaxUrl);  }else {    if($.isEmptyObject(thisSelectFun(thisD).jsonData)){      thisSelectFun(thisD).jsonData={ code: 0, msg: "獲取成功", count: 0,data:new Array()};    }  }}//請求后臺數據function ajaxFunss(json) {  json['async']=false;  json['dataType']='json';  json['type']='post';  var layerLoadIndex = layer.load(1); //換了種風格  var resultData=$.ajax(json);//發送請求  layer.close(layerLoadIndex);  if(resultData.status==200){//請求后臺數據成功    return resultData.responseJSON;  }else {    return null;  }}//生成下拉列表function createSelectFun(thisD) {  var json=thisSelectFun(thisD).jsonData;  var html='';  for(var n in json){    html+='<dd lay-value="'+json[n].id+'" class="">'+json[n].name+'</dd>';  }  var id=thisD.attr("id")+'dl';  $("#"+id).append(html);  return html;}//調用總方法function callMethodFun(thisD) {  var iDom=thisD.find(".layui-edge").eq(0);//i元素,eq為等于的意思  var divDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的div  /* var isShow = thisSelectFun(thisD).isShow;//是否顯示  var selectElement = thisSelectFun(thisD).selectElements;//選中的選項  var overStat = thisSelectFun(thisD).overStat;//鼠標經過和離開狀態  var checkedElementIds = thisSelectFun(thisD).checkedElementIds;//隱藏輸入框的value值*/  //小三角符號綁定點擊方法  iDom.click(function () {    if(thisSelectFun(thisD).isShow){      thisSelectFun(thisD).isShow=false;      divDom.addClass("layui-form-selected");//顯示下拉列表    }else {      thisSelectFun(thisD).isShow=true;      divDom.attr("class","layui-form-select");//隱藏下拉列表    }  });  //dl元素綁定點擊方法  var dlDom=thisD.find("dl").eq(0);  var searchId = thisD.attr("id")+'Search';//搜索框id  dlDom.on("click",'dd',function () {    if(thisSelectFun(thisD).initData.selectType) {      //多選      if (thisSelectFun(thisD).selectElements) {        thisSelectFun(thisD).selectElements = false;        $(this).addClass("layui-this");//設置勾選狀態        var text = $("#" + searchId).val();//輸入框的內容        var selectText = $(this).text() + ",";//選擇的選項        var checkedId = $(this).attr("lay-value") + ",";//獲取選項的id        if (text.indexOf(selectText) != -1) {//判斷輸入框中的內容是否包含有所選的選項          return;        }        thisSelectFun(thisD).checkedElementIds += checkedId;        $("#" + searchId).val(text + selectText);      } else {        thisSelectFun(thisD).selectElements = true;        $(this).attr("class", "");//清空勾選狀態        var val = $(this).text() + ",";//勾選的選項        var checkedId = $(this).attr("lay-value") + ',';//獲取選項的id        var text = $("#" + searchId).val().replace(val, "");//清除勾選的選項        $("#" + searchId).val(text);//設置        thisSelectFun(thisD).checkedElementIds = thisSelectFun(thisD).checkedElementIds.replace(checkedId, "");//清除勾選的選項      }    }else {      //單選      //獲取已經選中的選項，并清除      var ddDom=thisD.find(".layui-this").eq(0);      ddDom.attr("class","");//清除      $(this).addClass("layui-this");//設置勾選狀態      var selectText = $(this).text();//選擇的選項      var checkedId = $(this).attr("lay-value");//獲取選項的id      thisSelectFun(thisD).checkedElementIds = checkedId;      $("#" + searchId).val(selectText);      divDom.attr("class","layui-form-select");//隱藏下拉列表  }    var hiddenId=selectData[thisD.attr("id")].initData.inputId;//隱藏輸入框id    $("#"+hiddenId).val(thisSelectFun(thisD).checkedElementIds.substring(0,thisSelectFun(thisD).checkedElementIds.length-1));  })  //鼠標經過時  dlDom.mouseover(function () {    thisSelectFun(thisD).overStat=false;  });  //鼠標離開時  dlDom.mouseout(function () {    thisSelectFun(thisD).overStat=true;  });  //鼠標松開時  $("body").mouseup(function () {    if(thisSelectFun(thisD).overStat==true){//并且overStat為true      divDom.attr("class","layui-form-select");//隱藏下拉列表    }  });  //搜索框鍵盤松開事件  var searchDom = thisD.find("#"+searchId).eq(0);//搜索框對象  searchDom.keyup(function () {    searchFunssss(thisD,searchId,divDom,dlDom);  });}//根據輸入內容搜索出匹配的選項function searchFunssss(thisD,searchId,divDom,dlDom) {  var val=$("#"+searchId).val();//搜索框id  if(val.length>0){    var conText='';//符合條件的選項    var searchStats=false;//是否搜索到    var htmlText=thisSelectFun(thisD).htmlText;//緩存的html代碼    dlDom.children().each(function () {      var thisText=$(this).text();      var thisDom='<dd lay-value="'+$(this).attr("lay-value")+'" class="">'+thisText+'</dd>';      if(val==thisText){        conText+=thisDom;        htmlText=htmlText.replace(thisDom,"");        searchStats=true;        var searchId = thisD.attr("id")+'Search';//搜索框id        $("#"+searchId).val("");//清空搜索框      }    });    htmlText=conText+htmlText;    dlDom.children().remove();//刪除其子節點    dlDom.append(htmlText);    if(searchStats){      divDom.addClass("layui-form-selected");//顯示下拉列表    }  }}

<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/webpage/include/taglib.jsp"%><html><head>  <title>test</title>  <meta name="decorator" content="default"/>  <link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >  <script src="${ctxStatic}/selectFun.js" charset="utf-8"></script>  <script type="text/javascript">   $(document).ready(function() {      $("#busgateDiv").selectDataFun({        ajaxUrl:{url:'${ctx}/goods/goods/getStat',where:{}},//請求后臺數據的路徑        selectType:true,//true多選，false單選        title:'商品狀態',//字段中文名稱        inputId:'busgate'//實體類字段      });      $("#sortDiv").selectDataFun({        ajaxUrl:{url:'${ctx}/goods/goods/getSortname',where:{}},        selectType:true,        title:'商品大類',        inputId:'sort'      });    });  </script></head><body class="gray-bg">  <div class="row">  <div class="col-sm-12">  <form:form id="searchForm" modelAttribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">   <div class="form-group">     <span>商品名稱：</span>      <form:input path="name" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>     <span>商品代碼：</span>      <form:input path="code" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>     <span>商品條碼：</span>      <form:input path="code2" htmlEscape="false" maxlength="30" class=" form-control input-sm"/>    </div>   <br/><br/>   <div class="form-group">     <div class="layui-inline" id="sortDiv">     </div>     <div class="layui-inline" id="busgateDiv">     </div   </div>  </form:form>  <br/>  </div>  </div>  </body></html>