纯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:''};
 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 class="layui-form-select">'+'<p 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>'+'</p>'+'<dl class="layui-anim layui-anim-upbit" id="'+thisD.attr("id")+'dl" style=""></dl>'+
 '</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+='<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 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='<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){
 pDom.addClass("layui-form-selected");//显示下拉列表
 }
 }
}

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

调用如下：

<%@ 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() {
 $("#busgatep").selectDataFun({
 ajaxUrl:{url:'${ctx}/goods/goods/getStat',where:{}},//请求后台数据的路径
 selectType:true,//true多选，false单选
 title:'商品状态',//字段中文名称
 inputId:'busgate'//实体类字段
 });
 $("#sortp").selectDataFun({
 ajaxUrl:{url:'${ctx}/goods/goods/getSortname',where:{}},
 selectType:true,
 title:'商品大类',
 inputId:'sort'
 });
 });
 </script>
</head>
<body class="gray-bg">
 <p class="row">
 <p class="col-sm-12">
 <form:form id="searchForm" modelAttribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">
 <p 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"/>
 </p>
 <br/><br/>
 <p class="form-group">
 <p class="layui-inline" id="sortp">
 </p>
 <p class="layui-inline" id="busgatep">
 </p
 </p>
 </form:form>
 <br/>
 </p>
 </p>
 
</body>
</html>

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

相关文章：

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

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

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

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