jQuery选择:如何选择1个选项值并在另一个选择菜单中删除相同的选项? [英] jQuery Chosen: how to select 1 option value and remove the same one in another select-menu?
本文介绍了jQuery选择:如何选择1个选项值并在另一个选择菜单中删除相同的选项?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将2个元素彼此相邻放置.他们俩都使用jQuery选择插件.
I've put 2 elements next to eachother. Both of them are using the jQuery Chosen plugin.
这是代码:
<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>
这是Javascript. jQuery库,最新的Chosen插件和CSS都正确包含在课程中.
This is the Javascript. jQuery library, the latest Chosen plugin and CSS are all properly included ofcourse.
<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.
- 有两个具有相同值的选择元素.例如,当在元素1中选择值"1"时,我想在元素2中将其禁用.
- 但是.在元素1中取消选择值"1"后,在元素2中仍禁用了 still .这不是我想要的.在第一个元素中取消选择该值后,另一个值应再次可用.
- 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 still disabled in element 2. That's not what I want. The other value should be available again after deselecting the value in the 1st element.
有人知道如何做到这一点吗?
Does anybody know how to accomplish this?
编辑
我现在在这里正确放置了一个JSFiddle: http://jsfiddle .net/dq97z/3/.任何帮助将不胜感激!
I've now put up a JSFiddle right here: http://jsfiddle.net/dq97z/3/. Any help would be much appreciated!
推荐答案
应该执行以下操作:
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");
});
这篇关于jQuery选择:如何选择1个选项值并在另一个选择菜单中删除相同的选项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文