複数の従属要素を設定する（JavaScript）

Question

私は独立したドロップダウン（項目）から選択した値に依存する依存ドロップダウン（cat）を持つフォームを持っています。私はコピー貼り付けのコードを避けたいので、私は独立したパートナーに基づいて複数のドロップダウンを処理できる機能を探しています。明示的に従属要素を呼びたくない場合、またはコピー貼り付きのコードが発生します。

これで、要素同士を結合するか、要素同士を結びつけることができますか？

例：
ITEM1 - > CAT1
ITEM2 - > CAT2
ITEM3 - > CAT3

Answer 1

var roleByCategory = { 
     A: ["Soup", "Juice", "Tea", "Others"], 
     B: ["Soup", "Juice", "Water", "Others"], 
     C: ["Soup", "Juice", "Coffee", "Tea", "Others"] 
    } 

    $("form").on("change", ".indi_ele", changeCat); 
    $(".indi_ele select").change(); 


    function changeCat(event) { //should handle everything 
     var indie = $(event.target); 
     var depends = indie.closest('select').find('.gfield_select'); //dependent dropdown 
     var type = indie.val(); // this equals A, B, or C 

     var catOptions = ""; 
     for (categoryId = 0; categoryId < roleByCategory[type].length; categoryId++) { 
      catOptions += "<option>" + roleByCategory[type][categoryId] + "</option>"; 
     } 
      depends.html(catOptions); 
    } 

最初のドロップダウンの要素に特定の値を与え、2番目のドロップダウンの要素を移入事前に（あなたが望むならあなたはそれをユーザーから隠すかもしれません）。最初のドロップダウンの変更時にfilter()メソッドを使用して2番目のドロップダウンをフィルタリングします。