使用多个列表填充 jquery 选择下拉表单

Question

我看过很多与我的情况有关的不同帖子，但我仍在学习服务器端和 js 代码，所以我只是不明白如何将其应用于我的问题。

我正在尝试构建一个订单表格来选择要进行丝网印刷的衬衫/服装。我还没有表格中的所有代码，因为我已经遇到了问题，但这里是基本标记：（请记住，我计划在最终选择中获得货币价值，以用于价格估算计算器在我弄清楚这部分之后，与表格中的其他部分一起。）

我不知道如何填充第三个和第四个下拉列表，我已经可以用我的 jquery 标记判断 if($(this).val() == "100% Polyester/100% Cotton") 等将开始重复。

HTML：

    `                <form>
                <select name="garment">
                    <option selected>Choose An Option</option>
                    <option>Short Sleeve T-Shirts</option>
                    <option>Hoodies/Sweatshirts</option>
                    <option>Long Sleeve T-Shirts</option>
                    <option>Tank Tops</option>
                    <option>Shorts &amp; Pants</option>
                    <option>Hats &amp; Accessories</option>
                </select>
                <select name="type">
                    <option selected disabled>Choose an Option</option>
                </select>
                <select name="style">
                    <option selected disabled>Choose an Option</option>
                </select>
                <select name="color">
                    <option selected disabled>Choose a Color</option>
                </select>
            </form>`

jquery:

     `$(document).ready(function() {

    $garment = $("select[name='garment']");
    $type = $("select[name='type']");
    $style = $("select[name='style']");

    $garment.change(function() {

    if($(this).val() == "Short Sleeve T-Shirts") {
        $("select[name='type'] option").remove();
        $("<option>100% Cotton</option>").appendTo($type);
        $("<option>Blended</option>").appendTo($type);
        $("<option>100% Polyester/Athletic</option>").appendTo($type);
    }
    if($(this).val() == "100% Cotton") {
        $("select[name='style'] option").remove();
        $("<option>Regular Fit</option>").appendTo($style);
        $("<option>Premium Slim/Fashion Fit</option>").appendTo($style);
        $("<option>Women's Cut</option>").appendTo($style);
    }
    if($(this).val() == "Blended") {
        $("select[name='style'] option").remove();
        $("<option>Regular Fit</option>").appendTo($style);
        $("<option>Premium Slim/Fashion Fit</option>").appendTo($style);
        $("<option>Women's Cut</option>").appendTo($style);
    }
    if($(this).val() == "100% Polyester/Athletic") {
        $("select[name='style'] option").remove();
        $("<option>Men's</option>").appendTo($style);
        $("<option>Women's</option>").appendTo($style);
    }

    });
    });`

Answer 1

给你：

http://plnkr.co/edit/ETLLOaRFojk3wKoCODVg?p=preview

请注意，您只需要编辑linkedDropdowns 数组，其他一切都可以正常工作：

var linkedDropdowns = {
  "garment": {
    "Short Sleeve T-Shirts": ["100% Cotton", "Blended", "Polyester/Athletic"],
  },
  "type": {
    "100% Cotton": ["Regular Fit", "Premium Slim/Fashion Fit", "Women's Cut"],
    "Blended": ["Regular Fit", "Premium Slim/Fashion Fit", "Women's Cut"],
    "100% Polyester/Athletic": ["Men's", "Women's"]
  },
  "style": null 
};
$(function() {

    var dropdownNames = Object.keys(linkedDropdowns);

    dropdownNames.forEach( function(dropdownName) {

      var curIndex = dropdownNames.indexOf(dropdownName);
      if (curIndex === dropdownNames.length - 1)
        return;

      var curDropdown = $("select[name='" + dropdownName + "']");
      var nextDropdown = $("select[name='" + dropdownNames[curIndex+1] + "']");
      var nextOptions = linkedDropdowns[dropdownName];       

      curDropdown.change(function() {

          nextDropdown.find('option').remove().end();
          nextOptions[$(this).val()].forEach(function(curType) {
              $("<option>" + curType + "</option>").appendTo(nextDropdown);
          });
      });

    });
});

Answer 2

如果我理解正确，您似乎需要关系数据。而不是列表使用文件。

例如

{
  "type":"Short Sleeve T-Shirts",
  "subtypes":[
    "100% Cotton",
    "100% Polyester/Athletic",
    "Blended"
  ],
  "colors":[
    "Blue",
    "Black",
    "Red"
  ]
}

或者如果信息是嵌套的

{
  "type": "Short Sleeve T-Shirts",
  "subtypes":
  [
    {
      "name":"100% Cotton",
      "colors":[
        "Blue",
        "Black",
        "Red"
      ]
    },
    {
      "name":"100% Polyester/Athletic",
      "colors":[
        "Purple",
        "Green",
        "Orange"
      ]
    }
  ]

}

我不知道您在使用 jquery 时是否受到限制，但这会让人头疼。

您是否考虑过使用像 angular 这样的 MV* 框架？