填寫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？