用多個列表填充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，但這會變得令人頭疼。

你有沒有考慮使用像MV *框架的角度 ？