我有一个依赖下拉列表(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);
}
我使用的值不是唯一的下拉列表。 item1与item2具有相同的选项。但item1只需要影响cat1 NOT cat2和item2只需要影响cat2等等。 这是我想解决的问题。尝试将这些元素链接到一起,以便它们只影响它们应该影响的元素 –