我想从选择器中点击一个选项，但无法在复选框中选中它。例如，我只想点击“二”选项，但点击后无法选择。
我该如何调整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="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
$( document ).ready(function() {
$('.selectpicker').on('change',function() {
$("#roomOne option").show();
$("#roomTwo option").show();
$("#roomThree option").show();
$('.selectpicker').selectpicker('refresh');
});
});
/*
I also tried this:
$(document).ready(function() {
$('.selectpicker').on('change', function() {
// Seu código atual...
// Interceptando o clique na opção "two"
if (option === 'two') {
var optionTwo = $("#roomTwo option[data-value='two']");
optionTwo.prop('selected', !optionTwo.prop('selected'));
}
});
*/
</script>
</body>
</html>但这并不奏效。
应该保留先前的选项选择（可以是“一”或“三”），而不是选择“二”选项。重要：我需要点击“二”选项，我只是不能选择它。所以使用disabled不适用于这种情况。
1条答案
按热度按时间oalqel3c1#
从它看起来像你需要做的，你可能要考虑不使用这个插件和滚动自己的选择框功能，但有一个变通办法，我 * 认为 * 解决你的问题。
首先，确定当前在选择框中选择了什么值，并使用以下命令将其存储在变量中：
var previousState = $('select[name=roomTwo]').val()然后点击“两个”选项，无论你之前做了什么。
然后重新选择用户以前使用的任何选项：
标签：How to set selected value on select using selectpicker plugin from bootstrap