【发布时间】：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');就可以了
标签： javascript html jquery bootstrap-5 bootstrap-selectpicker