2017-06-06 77 views
-1

我有一個依賴下拉列表(cat)的窗體,它依賴於從獨立下拉列表中選擇的值(item)。我想避免複製粘貼代碼,所以我希望有一個功能可以處理基於其獨立合作伙伴的多個下拉菜單。我不想顯式調用依賴元素,否則我將不得不導致複製粘貼難看的代碼。設置多個相關元素(JavaScript)

那麼,有沒有將元素綁定在一起,或綁定到元素?

實施例:
ITEM1 - > CAT1
ITEM2 - > CAT2
項目3 - > CAT3

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); 
    } 
+0

我使用的值不是唯一的下拉列表。 item1與item2具有相同的選項。但item1只需要影響cat1 NOT cat2和item2只需要影響cat2等等。 這是我想解決的問題。嘗試將這些元素鏈接到一起,以便它們隻影響它們應該影響的元素 –

回答

0

給特定值第一下拉的元件和填充第二下拉的元素事先也是如此(如果你願意,你可以將它從用戶身上隱藏起來)。在更改第一個下拉列表時,使用filter()方法過濾第二個下拉列表。

+0

我使用的值不是唯一的下拉列表。 item1與item2具有相同的選項。但item1只需要影響cat1 NOT cat2和item2只需要影響cat2等等。 這是我想解決的問題。嘗試將這些元素鏈接起來,以便它們隻影響它們應該影響的元素 –