【发布时间】：2018-10-09 23:16:43
【问题描述】：
我正在使用 Chosen select 版本 1.8.7，我有 3 个并排选择，它从数据库表中提取选项。
如果我在第一个选择的选择中选择选项 1，那么该选项应该在第二个和第三个选择的选择中被禁用，如果我在第二个选择的选择中选择选项 2，那么该值应该在第一个和第三个选择的选择中被禁用，如果我在第三个选择中选择选项 3，那么它应该在第一个和第二个选择中被禁用。
我还想从选择的选择中删除选定的选项，例如多选，但我只想使用单选。我在 Chosen select 的文档中没有找到这个。
这是我的代码：
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="3">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
//This makes chosen select the first matching result from the list
//if you wrote anything on the input element (and it matches
//anything).
$('select').chosen();
$container1 = $('#select1').next();
$('input', $container1).change(function() {
var value = $('.active-result:first', $container1).text();
if (value !== undefined) {
$('#select1').data('chosen').result_select(value);
}
});
//Alternatively you could achieve the same with something like
//this, but it's getting a bit complicated:
var $container2 = $('#select2').next();
$('input', $container2).change(function() {
var option_index = $('.chosen-container .active-result:first').data("option-array-index");
if (option_index !== undefined) {
var option_value = $('#select2 option:nth-child(' + (option_index + 1) + ')').val();
$('#select2').val(option_value);
$('#select2').trigger("chosen:updated");
}
});body {
margin: 10px;
}
select {
width: 200px;
}
tr>td:first-child {
text-align: right;
padding-right: 7px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<table>
<tr>
<td>
<label for="select1">Using Chosen#result_select method</label>
</td>
<td>
<select id="select1" class="first" multiple>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="select2">Using other means...</label>
</td>
<td>
<select id="select2" class="second" multiple>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
</select>
</td>
</tr>
</table>【问题讨论】：
-
我已经在关闭选定选项时得到了解决方案，现在我想在其他选择中禁用选定选项
-
我已经更新了我的小提琴，它适用于取消选择选项，我尝试禁用选定的选项，但它不起作用请检查这个小提琴。 jsfiddle.net/deqngcmz/7
-
您可以让 onchange 事件侦听器函数收集每个选择的选定值。然后，您有多种方法可以从其他选择中删除相同的值。您可以使用 jQuery
.css()函数来隐藏重复的<option>。请记住在取消选择功能中将其反转。 -
当我使用 bootstrap 时它不起作用，谁能告诉我我的代码中的错误是什么。检查这个小提琴jsfiddle.net/j14cfvt0/3
-
我建议打开一个新问题而不是删除这个问题。 @乔恩
标签： javascript jquery html jquery-chosen