0

私は答えを求めてstackoverflowを調べましたが、ほとんどそこにいますが、助けが必要です。

同じオプションを含む複数のドロップダウンリストがあります。たとえば、次の3つの同一のリスト：

<label for='distlist_1'>Distribution List 1</label> 
<select name='distlist_1'> 
<option value=''>Please Select:</option> 
<option value='1'>All</option> 
<option value='2'>All Managers</option>
<option value='3'>Leavers</option>
</select>

唯一の違いは名前です。たとえば、distlist_1、2、3などです。必要に応じてIDを追加できます。

ユーザーが最初のドロップダウンリストでオプションを選択すると、他のすべてのドロップダウンからそのオプションを削除する必要があります。これを行うスクリプトを見つけました。

$('option').click(function(){
$('option:contains(' + $(this).html() +')').not(this).remove();
});

しかし、ユーザーが「ドロップダウンリスト1でそのオプションは必要ないのを待ってください」と決定した場合、彼女は別のものを選択し、オプションが他のドロップダウンに再表示されるようにするために必要です。上記のコードはオプションを削除し、十分にクリックするとすべてが消えるまでオプションを取得する方法はありません。

4

2 に答える 2

0

これは実際にあなたが望むことをします...これはjquery1.7とon（）イベントバインダーに基づいています

$(document).ready(function (){
      $('select').on('focus', function() {
        // on focus save the current selected element so you 
        // can place it back with all the other dropdowns
        var current_value = $(this).val();

        // bind the change event, with removes and adds elements
        // to the dropdown lists
        $(this).one('change.tmp', { v : current_value }, function(e)
        {
          if ($(this).val() != '')
          { // do not remove the Please select options
            $('option[value="' + $(this).val() + '"]')
              .not($('option[value="' + $(this).val() + '"]', $(this)))
              .remove();
          }

          if (e.data.v != '')
          { // do not add the Please select options
            $('select').not($(this)).append($('option[value="' + e.data.v + '"]', $(this)).clone());
          }
        });

        // on blur remove all the eventhandlers again, this is needed
        // else you don't know what the previously selected item was.
        $(this).on('blur.tmp', { v : current_value}, function (e)
        {
          $(this).off('blur.tmp');
          $(this).off('change.tmp');
        });
      });
    });

それがしない唯一のことは、すべてを正しい順序で注文することです。.append関数でそれを行う独自の方法を考える必要があります。

于 2012-07-13T12:35:09.703 に答える
0

簡潔だったのでこれを使ってしまいました...

jQuery(document).ready(function() {
var selects = $('.mapping')

selects.change(function() {
var vals = {};
selects.each(function() {
vals[this.value] = true;
}).get();
selects.not(this).children().not(':selected').not(':first-child').each(function() {
this.disabled = vals[this.value];
});
});
});
于 2012-07-19T10:08:10.640 に答える