jquery隐藏可选择下拉列表

时间：5年前阅读：6146

1、因为动态的css楼主写不出来，因此需要引入layui中的css样式：<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">；

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" style=""></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>

$(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>

<form:form id="searchForm" modelAttribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">

<form:input path="name" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>

<form:input path="code" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>

<form:input path="code2" htmlEscape="false" maxlength="30" class=" form-control input-sm"/>

</div>

</div>

</div

</div>

</form:form>

<br/>

</div>

效果图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery隐藏可选择下拉列表

网友评论