2017-06-06 42 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等等。 这是我想解决的问题。尝试将这些元素链接起来,以便它们只影响它们应该影响的元素 –