9

我已经将 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/。任何帮助将非常感激！

4

4 回答 4

24

这样的事情应该这样做：

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");
});
于 2012-02-07T18:58:13.943 回答
2

我试图在没有多项选择的情况下使用此代码，因此对于每个选择，只能选择一个选项。如果在选择框中选择了一个选项，我想使用 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>
于 2012-11-03T00:01:38.727 回答
0

由于您正在修改在第一个下拉列表中选择的选项，因此之前被禁用的选项不会再次启用。

您需要先启用所有选项，然后仅禁用所选选项。试试这个

$('.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);
});
于 2012-02-07T18:53:51.927 回答
0

您在每次更改时都设置了禁用，当然它不会起作用......

在这段代码中，我根据之前的值更改了 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>
于 2012-02-07T18:54:28.890 回答