JavaScript Populate jquery select drop down form with multiple lists populate jquery select,jquery populate select from json,jquery populate

I've seen so many different posts that pertain to my situation, but I'm still learning server side and js code, so I just don't understand how to apply it to my problem yet.

I'm trying to build an order form to choose shirts/apparel to get screen printed. I don't have all the code in the form yet, as I'm already having problems, but here is the basic markup: (Keep in mind I plan on having a monetary value on the final selection to put towards a price estimate calculator with other sections in the form after I figure this part out.)

I don't know how to populate the third and fourth drop down, and I can already tell with my jquery markup, that if($(this).val() == "100% Polyester/100% Cotton") etc. will start to repeat itself.

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

Here you go:

http://plnkr.co/edit/ETLLOaRFojk3wKoCODVg?p=preview

Note that you only need to edit the linkedDropdowns array, and everything else will just work:

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

I have made a quite simple hangman game but I have run into some issues. If I lose a few games in a row, my array that contains wrong letters will be filled up even though I empty it when I start a ...

I have made a quite simple hangman game but I have run into some issues. If I lose a few games in a row, my array that contains wrong letters will be filled up even though I empty it when I start a ...

Excuse me (I can not write good English!) i want to when change combobox selected item, this item (selected item) hide in other combobox and when change again selected hide item show again in other ...

Excuse me (I can not write good English!) i want to when change combobox selected item, this item (selected item) hide in other combobox and when change again selected hide item show again in other ...

TreeView creation: function CreateNotificationTree(userId) { debugger; var data = new kendo.data.HierarchicalDataSource({ transport: { read: { url: "../api/...

TreeView creation: function CreateNotificationTree(userId) { debugger; var data = new kendo.data.HierarchicalDataSource({ transport: { read: { url: "../api/...

I created a small api to generate test data on the fly. Each call creates a fresh user and returns the created data. To load the data I use the package request: var flow = protractor.promise....

I created a small api to generate test data on the fly. Each call creates a fresh user and returns the created data. To load the data I use the package request: var flow = protractor.promise....