2

我看过很多与我的情况有关的不同帖子，但我仍在学习服务器端和 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);
    }

    });
    });`
4

2 回答 2

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

    });
});
于 2013-08-07T04:06:15.157 回答
-1

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

例如

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

于 2013-08-07T03:15:22.733 回答