layui select 渲染Input css样式不灵敏
我的功能是 select 下拉列表为图片，点击图片后，select 的input内展示选中的图片，但是现在如果是编辑的话，在点击编辑事件渲染select会失效，
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../static/frame/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="../../static/css/log/log.css">
<link rel="stylesheet" href="../../static/css/user/user.css">
<link rel="stylesheet" href="../../static/css/menu/menu.css">
<script src="../../static/frame/jquery-v3.5.1/jquery-3.5.1.js" charset="utf-8"></script>
<script src="../../static/frame/layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/common/util.js"></script>
<script src="../../static/js/common/info.js" charset="utf-8"></script>
<script src="../../static/js/menu/update.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 21px;font-style: inherit;font-weight: 900;">
<legend>
<i class="layui-icon"></i>
编辑</legend>
</fieldset>
<form class="layui-form add-form" method="post" action="${request.contextPath}/menuController/updateUrl.json">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">父级菜单<span style="color:red;">*</span>：</label>
<input type="hidden" name="pMenu" value=${p_menu.mId}>
<div class="layui-input-block">
<input type="text" maxlength="30" name="pMenuName" lay-verify="required" disabled
class="layui-input layui-input-sm layui-disabled" value=${p_menu.mName}>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">菜单名称<span style="color:red;">*</span>：</label>
<input type="hidden" name="mId" value=${menuDao.mId}>
<div class="layui-input-block">
<input type="text" maxlength="30" name="mName" lay-verify="required"
class="layui-input layui-input-sm " value=${menuDao.mName}>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">菜单URL<span style="color:red;">*</span>：</label>
<div class="layui-input-block">
<input type="text" maxlength="30" name="mUrl" lay-verify="required" placeholder="请输入菜单URL"
class="layui-input layui-input-sm " value=${menuDao.mUrl}>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">菜单icon<span style="color:red;">*</span>：</label>
<input type="hidden" name="hidden-icon" id="hidden-icon" value=${menuDao.mIcon}>
<div class="layui-input-block">
<select id="selectIcon" name="selectIcon2" lay-verify="required" lay-filter="selectIcon2">
<option value="" >请选择</option>
<option value="0" ></option>
<option value="1" ></option>
<option value="2" ></option>
<option value="3" ></option>
<option value="4" ></option>
<option value="5" ></option>
<option value="6" ></option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">排序号<span style="color:red;">*</span>：</label>
<div class="layui-input-block">
<input type="number" name="mSort" lay-verify="required|num" placeholder="请输入排序号"
class="layui-input layui-input-sm " value=${menuDao.mSort!}>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item">
<label class="layui-form-label">菜单描述<span style="color:red;"></span>：</label>
<div class="layui-input-block">
<input type="text" maxlength="30" name="mDesc" placeholder="请输入菜单描述"
class="layui-input layui-input-sm " value=${menuDao.mDesc!}>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否用于导航<span style="color:red;">*</span>：</label>
<div class="layui-input-block">
<#if menuDao.isNavigtion="0">
<input type="radio" name="isNavigtion" value="0" title="是" checked="">
<input type="radio" name="isNavigtion" value="1" title="否">
<#else>
<input type="radio" name="isNavigtion" value="0" title="是">
<input type="radio" name="isNavigtion" value="1" title="否" checked="">
</#if>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-form-item" style="text-align: right;">
<div class="layui-input-block">
<button type="submit" class="layui-btn btn-primary layui-btn-sm" lay-submit
lay-filter="save_form">保存
</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>//menu.css
html, body {
height: 100%;
margin: 0px;
}
div.content_wrap {
width: 600px;
height: 100%;
margin-top: -10px;
}
div.zTreeDemoBackground {
width: 250px;
height: 100%;
text-align: left;
}
select ~ div dd[lay-value="0"]:before {
content: url("../../img/home.png");
}
select ~ div dd[lay-value="1"]:before {
content: url("../../img/anthority.png");
}
select ~ div dd[lay-value="2"]:before {
content: url("../../img/basics.png");
}
select ~ div dd[lay-value="3"]:before {
content: url("../../img/log.png");
}
select ~ div dd[lay-value="4"]:before {
content: url("../../img/menu.png");
}
select ~ div dd[lay-value="5"]:before {
content: url("../../img/role.png");
}
select ~ div dd[lay-value="6"]:before {
content: url("../../img/user.png");
}
//update.js
$(function () {
var iconValue;
layui.use(['table', 'laydate', 'util', 'form'], function () {
var form = layui.form;
form.verify({
num: [
/^[1-9]\d*$/
, '密码必须6到12位，且不能出现空格'
]
});
//获取后台传过来的iconvalue
showDefalut(iconValue);
//select选中切换input背景icon事件
form.on('select(selectIcon2)', function (data) {
iconValue = data.value;
changeBackGroud(iconValue);
});
})
})
//跳转update页面初始化select
function showDefalut(iconValue) {
iconValue = $("#hidden-icon").val();
getIconsUrl(iconValue);//渲染select页面
updateForm();
changeBackGroud(iconValue);//主动触发背景切换
}
//获取全部icon url 事件
function getIconsUrl(iconValue) {
var templateSelect = $("select[name='selectIcon2']");
var l=templateSelect.length;
for (let i = 0; i <templateSelect.length ; i++) {
if(templateSelect[i].value == iconValue)
templateSelect[i].selected = true;
}
}
//根据select value切换input icon事件
function changeBackGroud(iconValue) {
var input = $(".layui-select-title").find('input');
input.css({
background: ""
});
switch (iconValue) {
case '0':
input.css({
background: "url('../static/img/home.png') no-repeat center"
});
break;
case '1':
input.css({
background: "url('../static/img/anthority.png') no-repeat center"
});
break;
case '2':
input.css({
background: "url('../static/img/basics.png') no-repeat center"
});
break;
case '3':
input.css({
background: "url('../static/img/log.png') no-repeat center"
});
break;
case '4':
input.css({
background: "url('../static/img/menu.png') no-repeat center"
});
break;
case '5':
input.css({
background: "url('../static/img/role.png') no-repeat center"
});
break;
case '6':
input.css({
background: "url('../static/img/user.png') no-repeat center"
});
break;
}
input.attr("placeholder", " ");
}
//更新form
function updateForm() {
layui.use(['form'], function () {
var form = layui.form;
form.render('select');
});
}
你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答
本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。
因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。