jQuery 选择：如何选择 1 个选项值并在另一个选择菜单中删除相同的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9182008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Chosen: how to select 1 option value and remove the same one in another select-menu?
提问by Martijn van Turnhout
I've put 2 elements next to eachother. Both of them are using the jQuery Chosen plugin.
我已经把 2 个元素放在一起。他们都在使用 jQuery Chosen 插件。
This is the code:
这是代码：
<div class="wrapper">
<select data-placeholder="Number row 1" style="width:350px;" multiple class="chzn-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select data-placeholder="Number row 2" style="width:350px;" multiple class="chzn-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
This is the Javascript. jQuery library, the latest Chosen plugin and CSS are all properly included ofcourse.
这是Javascript。jQuery 库、最新的 Chosen 插件和 CSS 都被正确地包含了。
<script>
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
var selectedValue = $(this).find('option:selected').val();
$(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
});
</script>
This is what I want to accomplish with the script above.
这就是我想用上面的脚本完成的。
- There are two select elements with the same values. When value "1" has been selected in element 1 for example, I want to disable it in element 2.
- However. after I deselect value "1" in element 1, it's stilldisabled in element 2. That's not what I want. The other value should be available again after deselecting the value in the 1st element.
- 有两个具有相同值的 select 元素。例如，当在元素 1 中选择了值“1”时，我想在元素 2 中禁用它。
- 然而。在我取消选择元素 1 中的值“1”后，它仍然在元素 2 中被禁用。这不是我想要的。取消选择第一个元素中的值后，另一个值应该再次可用。
Does anybody know how to accomplish this?
有谁知道如何做到这一点？
EDIT
编辑
I've now put up a JSFiddle righthere: http://jsfiddle.net/dq97z/3/. Any help would be much appreciated!
现在我已经提出了一个的jsfiddle正确的位置：http://jsfiddle.net/dq97z/3/。任何帮助将非常感激！
回答by David Murdoch
Something like this should do it:
像这样的事情应该这样做：
http://jsfiddle.net/musicisair/dq97z/10/
http://jsfiddle.net/musicisair/dq97z/10/
// cache selects for use later
var selects = $('.chzn-select');
// whenever the selection changes, either disable or enable the
// option in the other selects
selects.chosen().change(function() {
var selected = [];
// add all selected options to the array in the first loop
selects.find("option").each(function() {
if (this.selected) {
selected[this.value] = this;
}
})
// then either disabled or enable them in the second loop:
.each(function() {
// if the current option is already selected in another select disable it.
// otherwise, enable it.
this.disabled = selected[this.value] && selected[this.value] !== this;
});
// trigger the change in the "chosen" selects
selects.trigger("liszt:updated");
});
回答by Stefannno
I'm trying to use this code without the multiple choice so for each select only one option can be chosen. I want to use the allow_single_deselect: true code to remove an option if chosen in the select box but I can't get it working. I disabled the search option because I don't need it on this page.
我试图在没有多项选择的情况下使用此代码，因此对于每个选择只能选择一个选项。如果在选择框中选择，我想使用 allow_single_deselect: true 代码删除一个选项，但我无法让它工作。我禁用了搜索选项，因为我在此页面上不需要它。
<script>//<![CDATA[
$(function(){
$('.chzn-select').chosen({disable_search_threshold: 10}) .change(
function() {
var selectedValue = $(this).find('option:selected').val();
$(this).parent().parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
$('.chzn-select').trigger("liszt:updated");
});
});//]]></script>
回答by ShankarSangoli
Since you are modifying the option which is selected in the first dropdown the previous options which were disabled are not enabled again.
由于您正在修改在第一个下拉列表中选择的选项，因此不会再次启用之前禁用的选项。
You need to first enable all the options and then disable only the selected option. Try this
您需要先启用所有选项，然后仅禁用选定的选项。尝试这个
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
var selectedValue = $(this).find('option:selected').val();
var $options = $(this).parent().find('option').attr('disabled', false);
$options.filter('option[value="'+ selectedValue +'"]:not(:selected)')
.attr('disabled', true);
});
回答by gdoron is supporting Monica
You set the disabled on every change, ofcourse it won't work...
您在每次更改时都设置为禁用，当然它不起作用......
In this code I change the disabled attribute based on the previous value;
在这段代码中，我根据以前的值更改了 disabled 属性；
<script>
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
var selectedValue = $(this).find('option:selected').val();
$(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)')
.prop("disabled", function( i, val ) {
return !val;
});
});
</script>
