jQueryを使用して変更イベントの新しいドロップダウンを作成する

Question

いくつかのランダムな値を持つドロップダウンメニューがあります。値のonchangeイベントトリガーを選択したときに、その下に新しいドロップダウンを追加すると、新しいドロップダウンが選択されたもの以外のすべての値を持つはずです。ここで2番目の値を変更すると、前の2つのドロップダウンから選択されていない値だけを持つ3番目のものが必要になります。

今のところ、新しいドロップダウンを追加するメカニズムがありますが、正しく機能しません。たとえば、最初の値を選択するとジョブが実行され、新しいドロップダウンが表示され、選択されているものを除くすべてのオプションがあります。しかし、私が戻って最初のドロップダウンのためのオプションを変更しようとすると、3番目のドロップダウンが作成されます。ドロップダウンが既に作成されている場合は別のドロップダウンをもう一度実行しないでください。既にトリガーされているドロップダウンの新しいonchangeイベントのトリガーを避けることも可能ですか？それとも、他の種類のイベントがこのケースに適しているのでしょうか？

これは、ジョブを説明しない私の関数である。

createNewDropDonws : function() { 
    var selectWrapper = $('#select-boxes'); 
    $(document).on('change', '.dynamic-select', function() { 
     var element = $(this); 
     var optionsLength = (element.find('option').length) - 1; 

     if(optionsLength === 1) { 
     return true; 
     } 

     var newSelect = $(this).clone(); 
     newSelect.find("option[value='" + element.val() + "']").remove(); 
     newSelect.appendTo(selectWrapper) 
    }); 
} 

これは、ドロップダウンのための私のHTMLです：

<div id="select-boxes"> 
    <select class="dynamic-select" id="ddlTest"> 
     <option value=""></option> 
     <option value="Belbin">Belbin</option> 
     <option value="Raven">Raven</option> 
     <option value="PPA">PPA</option> 
     <option value="PPA+">PPA+</option> 
     <option value="Basic Knowledge">Basic Knowledge</option> 
     <option value="PCT">PCT</option> 
    </select> 
    </div> 

そして、これは簡単なCSSクラスです：

.dynamic-select{ 
    display: block; 
    margin: 10px; 
    } 

はいどのようにjQueryを使ってこれを正しく実装することができますか？

Answer 1

私たちは次のようにそれを行うことができます：それは別のドロップダウンを追加したら、私達はちょうどexecutedのようないくつかのクラスを追加している

。イベントハンドラでは、現在のドロップドウオンがそのクラスを持っているかどうかを調べています。それがすでにある場合、それは次のように我々はすでにそのドロップダウンで行われることを意味：

$(document).ready(function() { 
 
    var selectWrapper = $('#select-boxes'); 
 
    $(document).on('change', '.dynamic-select', function() { 
 
    var element = $(this); 
 
    if(element.hasClass("executed")) 
 
     return; 
 
    
 
    var optionsLength = (element.find('option').length) - 1; 
 

 
    if (optionsLength === 1) { 
 
     return true; 
 
    } 
 

 
    var newSelect = $(this).clone(); 
 
    newSelect.find("option[value='" + element.val() + "']").remove(); 
 
    newSelect.appendTo(selectWrapper) 
 
    
 
    $(this).addClass("executed"); 
 
    
 
    }); 
 
});

.dynamic-select { 
 
    display: block; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="select-boxes"> 
 
    <select class="dynamic-select" id="ddlTest"> 
 
    <option value=""></option> 
 
    <option value="Belbin">Belbin</option> 
 
    <option value="Raven">Raven</option> 
 
    <option value="PPA">PPA</option> 
 
    <option value="PPA+">PPA+</option> 
 
    <option value="Basic Knowledge">Basic Knowledge</option> 
 
    <option value="PCT">PCT</option> 
 
    </select> 
 
</div>