填写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 *框架，如angular？