Comment générer une liste déroulante en utilisant pure js

Ci-dessous, je vais partager avec vous un exemple de génération d'une liste déroulante de sélection consultable à l'aide de code js pur. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

1. Parce que l'auteur ne peut pas écrire du CSS dynamique, vous devez introduire le style CSS dans layui :

<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >

2 Vous devez introduire la version jquery-1.8.3.js de. jquery

Sans plus tarder, le code est implémenté comme suit :

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=&#39;<p class="layui-form-select">&#39;+&#39;<p class="layui-select-title">&#39;+
      &#39;<input type="hidden" id="&#39;+inputId+&#39;" name="&#39;+inputId+&#39;" />&#39;+
    &#39;<span>&#39;+title+&#39;：</span>&#39;+&#39; &#39;+&#39;<input id="&#39;+thisD.attr("id")+&#39;Search" value="" hiddenValue="" class="form-control input-sm" type="text">&#39;+
    &#39;<i class="layui-edge"></i>&#39;+&#39;</p>&#39;+&#39;<dl class="layui-anim layui-anim-upbit" id="&#39;+thisD.attr("id")+&#39;dl" style=""></dl>&#39;+
    &#39;</p>&#39;;
  thisD.append(selectHtml);
}
//请求后台数据
function getSelectDataFun(thisD) {
  var fields = selectData[thisD.attr("id")].initData;//以id获取该对象的所有数据
  //判断数据ajaxUrl中是否含有url字段
  if(fields.ajaxUrl.hasOwnProperty(&#39;url&#39;)){
    //以请求路径为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[&#39;async&#39;]=false;
  json[&#39;dataType&#39;]=&#39;json&#39;;
  json[&#39;type&#39;]=&#39;post&#39;;
  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=&#39;&#39;;
  for(var n in json){
    html+=&#39;<dd lay-value="&#39;+json[n].id+&#39;" class="">&#39;+json[n].name+&#39;</dd>&#39;;
  }
  var id=thisD.attr("id")+&#39;dl&#39;;
  $("#"+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")+&#39;Search&#39;;//搜索框id
  dlDom.on("click",&#39;dd&#39;,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") + &#39;,&#39;;//获取选项的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=&#39;&#39;;//符合条件的选项
    var searchStats=false;//是否搜索到
    var htmlText=thisSelectFun(thisD).htmlText;//缓存的html代码
    dlDom.children().each(function () {
      var thisText=$(this).text();
      var thisDom=&#39;<dd lay-value="&#39;+$(this).attr("lay-value")+&#39;" class="">&#39;+thisText+&#39;</dd>&#39;;
      if(val==thisText){
        conText+=thisDom;
        htmlText=htmlText.replace(thisDom,"");
        searchStats=true;
        var searchId = thisD.attr("id")+&#39;Search&#39;;//搜索框id
        $("#"+searchId).val("");//清空搜索框
      }
    });
    htmlText=conText+htmlText;
    dlDom.children().remove();//删除其子节点
    dlDom.append(htmlText);
    if(searchStats){
      pDom.addClass("layui-form-selected");//显示下拉列表
    }
  }
}

Le code js ci-dessus est placé dans le js nommé selectFun.js L'appel

dans le fichier est le suivant :

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>


  
  
  <link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
  
  


  

  

  
   

     商品名称：
      
     商品代码：
      
     商品条码：
      
    
   


   

     

     
     

     
  
  

  

  

  

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter l'optimisation du packaging Webpack dans vue

Utilisez vue et réagir pour obtenir une expansion, un effondrement et d'autres effets

Solution à la requête locale 404 utilisant axios + express sous Vue 2.5.2

Comment déployer vue-router et exprimer des projets sur le serveur Monter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!