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

请注意，您只需要编辑链接的Dropdowns数组，其他所有内容都可以正常工作：

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

如果我正确理解这一点，看起来你需要关系数据。而不是列表使用文档。

e.g。

{
  "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 *框架？

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

2 个答案: