87,988
社区成员
发帖
与我相关
我的任务
分享请问前端大神Layui的select 下拉框怎么隐藏相同值呢？
form.on('select(select_1)', function (data) { //layui调用change select1的选项改变时触发
var sel2 = $('#select_2');//旧版JS写法 想要获取select2
var value = data.value;//这样可以获取当前select1选中的value
form.on('select(select_2)', function (data) { //想着select2的change时 隐藏掉 相同的。。可是基本无效
if (data.value == value)
{
this.find('option[value=' + value + ']').hide();
}
form.render('select1'); form.render('select2');//好像用layui最后都是要重新绑定一下才能生效？
});
以上代码没能实现我想要的功能，就是两个下拉框有同样的数据，但是select1选中的 select2就不显示，相反select2选了 回去下拉select1就把之前的显示，select2选了的 select1就隐藏看不到。。。百度了2天了。。JS实例很多，可是偏偏现在公司用的是layui，连onchange方法都不一样了，实在是不会啊。。求前端大神救救我这个掉发严重的后端码农吧
var sel2 = $('#select_2');//旧版JS写法 想要获取select2
var value = data.value;//这样可以获取当前select1选中的value
form.on('select(select_2)', function (data) { //想着select2的change时 隐藏掉 相同的。。可是基本无效
if (data.value == value)
{
this.find('option[value=' + value + ']').hide();
}
form.render('select1'); form.render('select2');//好像用layui最后都是要重新绑定一下才能生效？
});
以上代码没能实现我想要的功能，就是两个下拉框有同样的数据，但是select1选中的 select2就不显示，相反select2选了 回去下拉select1就把之前的显示，select2选了的 select1就隐藏看不到。。。百度了2天了。。JS实例很多，可是偏偏现在公司用的是layui，连onchange方法都不一样了，实在是不会啊。。求前端大神救救我这个掉发严重的后端码农吧
...全文
请发表友善的回复…
发表回复
林夕的树屋 2020-12-14
- 打赏
- 举报
var select= $("#morepay").clone();
//删除所有的option
$("#morepay").find('option').remove();
//查找出需要显示的option并复制
var options = select.find("option[value=2]").clone();
//将需要显示的option添加到select中
$("#morepay").append(options);
//因为option.remove()不会刷新控件,需要将新的option切换上去
//这里排除了options.size() == 0的情况
$("#select").find('option').eq(0).attr("selected",true);
在移除之前先把select clone一下呢
jdjiadian 2019-01-30
- 打赏
- 举报
form.on('select(select_1)', function (data) {
$("#select_2").find('option[value=' + data.value + ']').remove();
form.render('select');
});
form.on('select(select_2)', function (data) {
$("#select_1").find('option[value=' + data.value + ']').remove();
form.render('select');
});
感谢各位提醒不能用hide, 现在2句代码实现了，但是删除了的 就没了，再操作一次 就更少了。。。
$("#select_2").find('option[value=' + data.value + ']').remove();
form.render('select');
});
form.on('select(select_2)', function (data) {
$("#select_1").find('option[value=' + data.value + ']').remove();
form.render('select');
});
感谢各位提醒不能用hide, 现在2句代码实现了，但是删除了的 就没了，再操作一次 就更少了。。。
jdjiadian 2019-01-30
- 打赏
- 举报
抱歉啊大神，我没说清楚，我是MVC的 数据是直接模型绑定的，我一会上班了研究研究您的代码 看看能不能改改 先谢谢了
LGEC 2019-01-29
- 打赏
- 举报
Demo 如下，不知道是否符合需求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!--select模板-->
<script id="optionList" type="text/html">
<option value="">请选择</option>
{{# layui.each(d.list, function(index, item){ }}
<option value="{{item.id}}">{{item.name}}</option>
{{# }); }}
</script>
<form action="" method="post" lay-filter="formDemo" class="layui-form">
<select name="" id="select1" lay-filter="select1">
<option value="请选择"></option>
</select>
<select name="" id="select2" lay-filter="select2">
<option value="请选择"></option>
</select>
</form>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['laytpl','table', 'element', 'jquery', 'layer'], function() {
var element = layui.element;
var laytpl = layui.laytpl;
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var allData = [{'name':'Join','id':1},{'name':'Tom','id':2},{'name':'Jan','id':3},{'name':'Mary','id':4}] //select数据
/*初始渲染*/
var data = { //数据
"list": allData
}
var getTpl = optionList.innerHTML, //optionList:模板id
view = document.getElementById('select1'),
view2 = document.getElementById('select2');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
view2.innerHTML = html;
});
form.render('select');
var control = true; //数据是否去重过
/*select1 change*/
form.on('select(select1)', function (data) {
if (control) {
var val = data.value;
var index = allData.findIndex(item=>item.id==val);
var newData = allData.slice(); //数组复制
newData.splice(index,1); //去掉选中数据
/* 重新渲染 */
var data = { //数据
"list": newData
}
var getTpl = optionList.innerHTML, //optionList:模板id
view = document.getElementById('select2');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
form.render('select');
control = false;
}
});
/*select2 change*/
form.on('select(select2)', function (data) {
if (control) {
var val = data.value;
var index = allData.findIndex(item=>item.id==val);
var newData = allData.slice(); //数组复制
newData.splice(index,1); //去掉选中数据
/* 重新渲染 */
var data = { //数据
"list": newData
}
var getTpl = optionList.innerHTML, //optionList:模板id
view = document.getElementById('select1');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
form.render('select');
control = false;
}
});
});
</script>
</body>
</html>
jdjiadian 2019-01-29
- 打赏
- 举报
删除也可以 求大神给段layui的select 实现代码
jdjiadian 2019-01-29
- 打赏
- 举报
大神说的思路很明确，求给段layui的select实现代码
LGEC 2019-01-29
- 打赏
- 举报
两个select都通过模块引擎laytpl进行渲染，每次改变其中一个select后，另一个通过模块重新进行渲染。当然渲染时要把不想显示的数据去掉。
丰云 2019-01-29
- 打赏
- 举报
option可以hide吗？从没有这样用过，只做过移除或添加，没做过显示或隐藏的。。。
jdjiadian 2019-01-28
- 打赏
- 举报
form.on('select(select_1)', function (data) {
var sel2 = $('#select_2');
var value = data.value;
form.on('select(select_2)', function (data) {
if (data.value == value)
{
this.find('option[value=' + value + ']').hide();
}
form.render('select1'); form.render('select2');
});
});
form.on('select(select_2)', function (data) {
});
以上就是放在script layui下的select1的change方法，请问怎么实现 1选了 内容1 2就不显示内容1 呢。。。
var sel2 = $('#select_2');
var value = data.value;
form.on('select(select_2)', function (data) {
if (data.value == value)
{
this.find('option[value=' + value + ']').hide();
}
form.render('select1'); form.render('select2');
});
});
form.on('select(select_2)', function (data) {
});
以上就是放在script layui下的select1的change方法，请问怎么实现 1选了 内容1 2就不显示内容1 呢。。。
