검색 가능한 선택 드롭다운 목록 방법을 구현하는 순수 js 코드

이 글은 주로 순수 js 코드를 사용하여 검색 및 선택 가능한 드롭다운 목록을 생성하는 예제를 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 작성자는 동적 CSS를 작성할 수 없으므로layui에 CSS 스타일을 도입해야 합니다.

<link>；

2. jquery의 jquery-1.8.3.js 버전을 도입해야 합니다

. 코드 구현은 다음과 같습니다.

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='<p>'+'</p><p>'+
      '<input>'+
    '<span>'+title+'：</span>'+' '+'<input>'+
    '<i></i>'+'</p>'+'

'+     '';   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+='

'+json[n].name+'

';   }   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 pDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的p   /* 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;       pDom.addClass("layui-form-selected");//显示下拉列表     }else {       thisSelectFun(thisD).isShow=true;       pDom.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);       pDom.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       pDom.attr("class","layui-form-select");//隐藏下拉列表     }   });   //搜索框键盘松开事件   var searchDom = thisD.find("#"+searchId).eq(0);//搜索框对象   searchDom.keyup(function () {     searchFunssss(thisD,searchId,pDom,dlDom);   }); } //根据输入内容搜索出匹配的选项 function searchFunssss(thisD,searchId,pDom,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='

'+thisText+'

';       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){       pDom.addClass("layui-form-selected");//显示下拉列表     }   } }

위 js 코드는 selectFun.js

호출은 다음과 같습니다.

  <title>test</title>
  <meta>
  <link>
  <script></script>
  <script>
   $(document).ready(function() {
      $("#busgatep").selectDataFun({
        ajaxUrl:{url:&#39;${ctx}/goods/goods/getStat&#39;,where:{}},//请求后台数据的路径
        selectType:true,//true多选，false单选
        title:&#39;商品状态&#39;,//字段中文名称
        inputId:&#39;busgate&#39;//实体类字段
      });
      $("#sortp").selectDataFun({
        ajaxUrl:{url:&#39;${ctx}/goods/goods/getSortname&#39;,where:{}},
        selectType:true,
        title:&#39;商品大类&#39;,
        inputId:&#39;sort&#39;
      });
    });
  </script>


  <p>
  </p><p>
  <form>
   <p>
     <span>商品名称：</span>
      <input>
     <span>商品代码：</span>
      <input>
     <span>商品条码：</span>
      <input>
    </p>
   <br><br>
   <p>
     </p>
<p>
     </p>
     <p>
     </p>   </form></p>
  
  <br>
  
  
  

관련 권장 사항:

easyUI drop -다운 목록 클릭 이벤트 사용 예 공유

드롭다운 목록 기능의 jquery 및 CSS 구현 튜토리얼

HTML 드롭다운 목록 태그의 javascript 작업

위 내용은 검색 가능한 선택 드롭다운 목록 방법을 구현하는 순수 js 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!