使用选择器单击后如何隐藏选择选项？
Posted
技术标签:
【中文标题】使用选择器单击后如何隐藏选择选项？【英文标题】：How to hide select option after click with select picker? 【发布时间】：2021-11-07 13:17:41 【问题描述】：我们这里有三个房间。其中有三个选项。而且这三个选项是一样的。每个用户可以选择一个。
例如，如果用户名为 John。约翰在第一个房间，如果他选择选项一。二室和三室，选项一，用jQuery隐藏。
但是没有selectpicker也可以。
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<label for="roomOne" class="form-label">Room One</label>
<select name="roomOne" id="roomOne" class="form-control selectpicker">
<option value="1" data-value="one">One</option>
<option value="2" data-value="two">Two</option>
<option value="3" data-value="three">Three</option>
</select>
</div>
<div class="col-md-4">
<label for="roomTwo" class="form-label">Room Two</label>
<select name="roomTwo" id="roomTwo" class="form-control selectpicker">
<option value="1" data-value="one">One</option>
<option value="2" data-value="two">Two</option>
<option value="3" data-value="three">Three</option>
</select>
</div>
<div class="col-md-4">
<label for="roomThree" class="form-label">Room Three</label>
<select name="roomThree" id="roomThree" class="form-control selectpicker">
<option value="1" data-value="one">One</option>
<option value="2" data-value="two">Two</option>
<option value="3" data-value="three">Three</option>
</select>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script>
const selects = document.querySelectorAll('.form-select');
selects.forEach((elem) =>
elem.addEventListener('change', (event) =>
let values = Array.from(selects).map(select => select.value);
for (let select of selects)
select.querySelectorAll('option').forEach((option) =>
let value = option.value;
if (value && value !== select.value && values.includes(value))
option.hidden = true;
$('.selectpicker').selectpicker('refresh');
else
option.hidden = false;
);
);
);
</script>
</body>
</html>
【问题讨论】：
没有类form-select的元素应该是form-control，只需删除jquery行$('.selectpicker').selectpicker('refresh');就可以了
【参考方案1】：
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<label for="roomOne" class="form-label">Room One</label>
<select name="roomOne" id="roomOne" class="form-control selectpicker">
<option value="1" data-value="one" dataset="pickerone">One</option>
<option value="2" data-value="two" dataset="pickerone">Two</option>
<option value="3" data-value="three" dataset="pickerone">Three</option>
</select>
</div>
<div class="col-md-4">
<label for="roomTwo" class="form-label">Room Two</label>
<select name="roomTwo" id="roomTwo" class="form-control selectpicker">
<option value="1" data-value="one" dataset="pickertwo">One</option>
<option value="2" data-value="two" dataset="pickertwo">Two</option>
<option value="3" data-value="three" dataset="pickertwo">Three</option>
</select>
</div>
<div class="col-md-4">
<label for="roomThree" class="form-label">Room Three</label>
<select name="roomThree" id="roomThree" class="form-control selectpicker">
<option value="1" data-value="one" dataset="pickerthree">One</option>
<option value="2" data-value="two" dataset="pickerthree">Two</option>
<option value="3" data-value="three" dataset="pickerthree">Three</option>
</select>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script>
/* const selects = document.querySelectorAll('.form-select');
selects.forEach((elem) =>
elem.addEventListener('change', (event) =>
let values = Array.from(selects).map(select => select.value);
for (let select of selects)
select.querySelectorAll('option').forEach((option) =>
let value = option.value;
if (value && value !== select.value && values.includes(value))
option.hidden = true;
$('.selectpicker').selectpicker('refresh');
else
option.hidden = false;
);
);
);*/
$( document ).ready(function()
$('.selectpicker').on('change',function()
$("#roomOne option").show();
$("#roomTwo option").show();
$("#roomThree option").show();
var option = $('option:selected', this).attr('data-value');
var option1 = $('option:selected', this).attr('dataset');
if(option1 == 'pickerone')
$("#roomTwo option[data-value=" + option + "]").hide();
$("#roomThree option[data-value=" + option + "]").hide();
if(option1 == 'pickertwo')
$("#roomOne option[data-value=" + option + "]").hide();
$("#roomThree option[data-value=" + option + "]").hide();
if(option1 == 'pickerthree')
$("#roomTwo option[data-value=" + option + "]").hide();
$("#roomOne option[data-value=" + option + "]").hide();
$('.selectpicker').selectpicker('refresh');
);
);
</script>
</body>
</html>您好 irankhostravi，请。检查一下。
【讨论】：
解释你做了什么，你是如何解决 OPs 问题的。仅仅贴一堵代码并没有多大帮助 我知道他们，我在说解释你的答案是如何解决它的。 我再次检查了这个，但我看到了这个。 i.stack.imgur.com/tGOlJ.png 请。查看此视频awesomescreenshot.com/video/5189235以上是关于使用选择器单击后如何隐藏选择选项？的主要内容，如果未能解决你的问题，请参考以下文章