纯js如何生成下拉列表-js教程-PHP中文网

首页

web前端

js教程

纯js如何生成下拉列表

亚连

Jun 12, 2018 pm 04:27 PM

下拉列表搜索选择

下面我就为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。

1、因为动态的css楼主写不出来，因此需要引入layui中的css样式：

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

登录后复制

2、需要引入jquery-1.8.3.js版本的jquery

话不多说，代码实现如下：

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:&#39;&#39;};
  thisSelectFun($(this)).thisDom=$(this);//设置索引为id，值为本身对象
  thisSelectFun($(this)).initData=json;//初始数据为json
/*  var isShow=true;//是否显示
  var selectElements;//选择的选项
  var overStat=true;//鼠标经过的状态
  var checkedElementIds=&#39;&#39;;//选中项的id*/
  //根据字段生成html代码
  setFieldTypeFun($(this));
  //请求后台数据
  getSelectDataFun($(this));
  //生成下拉列表
  thisSelectFun($(this)).htmlText = createSelectFun($(this));//htmlText为缓存的html代码
  //调用总方法
  callMethodFun($(this));
}
//根据对象id值获取对象数据
function thisSelectFun(thisD) {
  if(thisD.attr("id")==&#39;&#39;){
    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");//显示下拉列表
    }
  }
}

登录后复制

以上js代码放在名称为selectFun.js的js文件中

调用如下：

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


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


  
  

  
   

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

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中如何实现webpack打包优化

使用vue和react来实现展开收起等效果

在Vue 2.5.2下使用axios + express本地请求404的解决方法

如何把vue-router和express项目部署到服务器上去

以上是纯js如何生成下拉列表的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1231

显示更多

Related knowledge

iBatis和MyBatis：哪个更适合你？ Feb 19, 2024 pm 04:38 PM

iBatis与MyBatis：你应该选择哪个？简介：随着Java语言的快速发展，许多持久化框架也应运而生。iBatis和MyBatis是两个备受欢迎的持久化框架，它们都提供了一种简单而高效的数据访问解决方案。本文将介绍iBatis和MyBatis的特点和优势，并给出一些具体的代码示例，帮助你选择合适的框架。iBatis简介：iBatis是一个开源的持久化框架

wallpaper engine能家庭共享吗 Mar 18, 2024 pm 07:28 PM

请问Wallpaper是否支持家庭共享呢?很遗憾，不能支持哦。尽管如此，我们仍有解决方案。比如，可以用小号购买或先由大号下载好软件和壁纸，然后再更换到小号。简单启动软件是完全没问题的。wallpaperengine能家庭共享吗答：Wallpaper暂不支持家庭共享功能。1、据了解，WallpaperEngine似乎并不适合家庭共享环境。2、为了解决这个困扰，建议您考虑购买全新账号;3、或者先在主账号下载所需软件和壁纸，再切到其他账号。4、只要轻点打开软件，便无碍。5、您可以在上述网页上查看属性“

wallpaper engine怎么设置锁屏壁纸？wallpaper engine使用方法 Mar 13, 2024 pm 08:07 PM

　　wallpaperengine是常用于设置桌面壁纸的软件，用户在wallpaperengine里可以搜索自己喜欢的图片来生成桌面壁纸，还支持将电脑中的图片添加到wallpaperengine中设置成电脑壁纸。下面就来看看wallpaperengine设置锁屏壁纸的方法吧。　　wallpaperengine设置锁屏壁纸教程　　1、首先进入软件，然后选择已安装，点击“配置壁纸选项”。　　2、单独设置选择完壁纸后需要点击右下方的确定。　　3、再去点击上方的设置选和预览。　　4、接下来

百度高级搜索怎么用 Feb 22, 2024 am 11:09 AM

百度高级搜索怎么用百度搜索引擎是目前中国最常用的搜索引擎之一，它提供了丰富的搜索功能，其中之一就是高级搜索。高级搜索可以帮助用户更精确地搜索到所需的信息，提高搜索效率。那么，百度高级搜索怎么使用呢？第一步，打开百度搜索引擎首页。首先，我们需要打开百度的官方网站，即www.baidu.com。这是百度搜索的入口。第二步，点击高级搜索按钮。在百度搜索框的右侧，有

wallpaper engine看片有病毒吗 Mar 18, 2024 pm 07:28 PM

用户在使用wallpaperengine可以下载各种壁纸，还可以使用动态壁纸，有很多用户不知道wallpaperengine看片有没有病毒，只是视频文件是无法作为病毒的。wallpaperengine看片有病毒吗答：不会。1、只是视频文件是无法作为病毒的。2、只要确保从可信的来源下载视频，并保持电脑的安全防护措施，就可以避免病毒感染的风险。3、应用程序类壁纸是apk格式，apk可能会携带木马病毒。4、WallpaperEngine本身没有病毒，但是创意工坊里的一些应用程序类壁纸可能有病毒。

闲鱼怎么搜索用户 Feb 24, 2024 am 11:25 AM

闲鱼怎么搜索用户？在软件闲鱼中，我们可以直接在软件里面去找到想要沟通的用户。但却不清楚要怎么搜索用户。在搜索后的用户中查看即可。接下来就是小编为用户带来的搜索用户方式介绍的介绍，感兴趣的用户快来一起看看吧！闲鱼怎么搜索用户答：在搜索后的用户中查看详情介绍：1、进入软件，点击搜索框。2、输入用户名称，点击搜索。3、再选择搜索框下的【用户】，即可找到对应用户了。

wallpaper engine的壁纸在哪个文件夹 Mar 19, 2024 am 08:16 AM

用户在使用wallpaper时可以下载各种自己喜欢的壁纸进行使用，有很多用户不知道wallpaper的壁纸在哪个文件夹，用户下载的壁纸存放在content文件夹里。wallpaper的壁纸在哪个文件夹答：content文件夹。1、打开文件资源管理器。2、点击左侧“此电脑”。3、找到“STEAM”文件夹。4、选择“steamapps”。5、点击“workshop”。6、找寻“content”文件夹。

wallpaper engine订阅记录在哪 Mar 18, 2024 pm 05:37 PM

请问怎样查看wallpaper订阅记录呢?许多用户在该软件上进行了大量的订阅，但可能不清楚如何查询这些记录。其实，您只需要在软件的浏览功能区进行操作即可。wallpaperengine订阅记录在哪答：在浏览界面。1、请先启动电脑，并进入wallpaper软件。2、找到应用程序左上方的浏览选项卡图标并点击。3、在“浏览”界面中，您将看到各类壁纸及订阅源的总览。4、在右上角的搜索框中输入您想要搜索的关键词。5、依靠搜索结果，你便能找到订阅壁纸的来源信息。6、点击对应的订阅源，即可进入其网页。7、在订

See all articles

纯js如何生成下拉列表

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题