您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关纯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='<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" ></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");//显示下拉列表 } } }
以上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() { $("#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>
关于“纯js代码如何生成可搜索选择下拉列表”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。