Javascriptを使用して一連の選択ドロップダウンリストを維持する

Question

私はドロップダウンリスト（8個）を持っています。すべてのドロップダウンには、同じドロップダウンオプションが用意されています。しかし、ビジネス上の要件は、ユーザーが同じオプションを複数回選択できないようにすることです。

問題を見ると、最初はシンプルに見えますが、急速に多くのコードになっています。しかし、それは比較的一般的な問題のようです。誰もが解決策を知っていますか、Javascriptのリームを書くことなくこれを行う方法についてのヒントがあります。再利用可能なjqueryプラグインのいくつかの並べ替えもこれに便利かもしれません。誰かが存在しますか？

1つの問題は、選択された項目が選択されると、他の選択リストでは使用できなくなることです。アイテムは、他の選択ドロップダウンから削除されます。再度利用可能になると（ドロップダウンの変更）、のリストの正しいポイントにを挿入する必要があります（ドロップダウンオプションには順序があります）。これは、私のソリューションがかなり複雑になってきたところです。

Answer 1

個人的には、実装する方法は、単純にキャッシングの目的のために、すべての可能なオプションを含む「マスター」ドロップダウンを設けることです。これらのオプションは、それぞれの「スレーブ」ドロップダウンで複製されます。任意のスレーブドロップダウンが変更されるたびに、2つのドロップダウンが同じ選択された値を共有することができないように、すべてのスレーブドロップダウンが再度設定されます。

デモンストレーションの目的で、私は下のコードで3つのドロップダウンリストを使って作業しましたが、かなり簡単にスケールアップする必要があります。モードドロップダウンを追加して、それらに属性class="slave"が含まれていることを確認してください。

また、すべてのオプションが削除されないようにするには、スレーブのすべてのドロップダウンリスト（デフォルトのオプションなど）に存在できるようにするには、属性class="immune"マスタードロップダウンのオプションタグに移動します。

<script type="text/javascript"> 

    // document - on load 
    $(document).ready(function() { 

     // initially populate all the drop downs 
     PopulateAllDropDowns(); 

     // populate all drop downs on each subsequent change 
     $('select.slave').change(function(){ 
      PopulateAllDropDowns(); 
     }); 

    }); 

    function PopulateAllDropDowns() 
    { 
     // populate all the slave drop downs 
     $('select.slave').each(function(index){ 
      PopulateDropDown($(this).attr('id')); 
     }); 
    } 

    function PopulateDropDown(id) 
    { 
     // preserve the selected value 
     var selectedValue = $('#'+id).val(); 

     // clear current contents 
     $('#'+id).html(''); 

     // attempt to add each option from the master drop down 
     $('select#ddlTemplate').children('option').each(function(index){ 

      // scope-safe var 
      var masterOptionValue = $(this).val();    

      // check if option is in use in another slave drop down, unless it's immune 
      var optionInUse = false; 
      if (!$(this).hasClass("immune")) 
      { 
       $('select.slave option:selected').each(function(index){ 
        if (masterOptionValue == $(this).val()) 
         optionInUse = true; 
       }); 
      }    

      // if it's not in use, add it to this slave drop down 
      if (!optionInUse) 
      { 
       // create new option 
       var newOption = $('<option></option>').val($(this).val()).html($(this).text()); 

       // ensure selected value is preserved, if applicable 
       if (selectedValue == $(this).val()) 
        newOption.attr('selected', 'selected') 

       // add the option     
       $('#'+id).append(newOption); 
      } 

     }); 
    }  
</script> 

 

<form> 

    <!-- master drop down --> 
    <select id="ddlTemplate" class="master" style="display:none"> 
     <option value="" class="immune">Select ...</option> 
     <option value="a">Option A</option> 
     <option value="b">Option B</option> 
     <option value="c">Option C</option> 
     <option value="d">Option D</option> 
     <option value="e">Option E</option> 
    </select> 

    <!-- slave drop downs --> 
    <select id="ddlOne" class="slave"></select> 
    <select id="ddlTwo" class="slave"></select> 
    <select id="ddlThree" class="slave"></select> 

</form> 

お役に立てば幸いです。

Answer 2

最も簡単な方法は、他のすべてのドロップダウンのコンテンツをフィルタリングし、値がすでに選択されているオプションを削除または無効にするselectイベントからドロップダウンリストに関数をバインドすることです。

リストから順番を保つには、オプションリストを配列にキャッシュしてから、適切な位置を削除して追加するか、すべてのオプションを削除して現在の可能なオプションを再度追加します。

すでに選択されているオプションをキャッシュに入れなおしても、何も失うことはありません。