我已经将 2 个元素放在一起。他们都使用 jQuery Chosen 插件。
这是代码:
<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 都包含在内。
<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>
这就是我想用上面的脚本完成的。
- 有两个具有相同值的选择元素。例如,当在元素 1 中选择了值“1”时,我想在元素 2 中禁用它。
- 然而。在我取消选择元素 1 中的值“1”后,它仍然在元素 2 中被禁用。这不是我想要的。取消选择第一个元素中的值后,另一个值应该再次可用。
有谁知道如何做到这一点?
编辑
我现在在这里建立了一个 JSFiddle : http : //jsfiddle.net/dq97z/3/。任何帮助将非常感激!