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>

これがジャバスクリプトです。もちろん、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>

これが、上記のスクリプトで達成したいことです。

  • 同じ値を持つ 2 つの select 要素があります。たとえば、要素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

複数選択なしでこのコードを使用しようとしているので、選択ごとに1つのオプションしか選択できません。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 に答える