Dynamic Dropdowns

by Kai_Draord

HTML

<table class="table-container">
   <tbody>
     <tr>
       <td>
         <select class="custom-select" class="mediaSel" data-id="1" name="mediaSel" onchange="dropDownSelect(this.id, 'mediaSel2')">
           <option value="">--Select--</option>
           <option value="Illustration" name="Illustration">Illustration</option>
           <option value="GraphicDesign" name="GraphicDesign">Graphic Design</option>
           <option value="MotionGraphics" name="MotionGraphics">Motion Graphics</option>
           <option value="WebDesign" name="WebDesign">Web Design</option>
         </select>
       </td>
       <td>
         <select class="custom-select" class="mediaSel2" data-id="1" name="mediaSel2"></select>
       </td>
       <td class="buttonRow">
         <div id="addRow" class="addButton" onclick="addSelection()"><span class="plus"></span></div>

       </td>
     </tr>
   </tbody>
 </table>

CSS

body {
 padding: 0;
 margin: 0;
 background: #333;
}

.table-container {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.custom-select {
      background-color: #fff;
      color: #333;
      width: 100%;
      height: 40px;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 10px;
}

.custom-select .option {
      padding-bottom: 30px;
}

.addButton {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    height: 40px;
    font-size: 20px;
    width: 40px;
    position: absolute;
    border-radius: 50%;
    transition: 0.5s all ease;
    top: 0;
    left: 0;
}

.addButton:hover {
    background-color: #fff;
    color: #333;
    transition: 0.5s all ease;
}

.addButton .plus {
    height: 2px;
    width: 15px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.addButton .plus::after {
    content: "";
    width: 2px;
    height: 15px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.removeButton {
    top: 0;
    left: 0;
    position: absolute;
    background-color: red;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: 0.5s all ease;
    border: none;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.removeButton:hover {
    background: rgba(255,50,50,.8);
    transition: 0.5s all ease;
}

.removeButton .minus {
    width: 15px;
    height: 2px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
}

.table-container {
    width: 100%;
    height: auto;
}

.buttonRow {
    width: 55px;
    height: auto;
    position: relative;
}

#mediaSel2 {
  display:...

JavaScript

function dropDownSelect(mainMenu, subMenu) {
    var mainMenu = document.getElementById('mediaSel');
    var subMenu = document.getElementById('mediaSel2');
    var hideSel = document.getElementById("mediaSel2");
    //clear dropdown 2 everytime something selected
    subMenu.innerHTML = "";
    
     //arrays of value and string
    if(mainMenu.value == "Illustration") {
       var optionArray = ["Select|--select--","ChildrensBooks|Childrens Book Design","FanArt|Fan Art","WallArt|Wall Art"];
    }
     else if(mainMenu.value == "GraphicDesign") {
       var optionArray = ["Select|--select--","Logo|Logo","BusinessCards|Business Cards","Flyers|Flyers","Billboards|Billboards","MagazineAds|Magazine Ads","CatalogeDesign|Cataloge Design","NewsPaperAds|Newspaper Ads"];
    }
    else if(mainMenu.value == "MotionGraphics") {
       var optionArray = ["Select|--select--","LogoAnimation|Logo Animation","Explainers|Explainer Videos","ShortFilms|Short Film Animation","CharacterDesign|Character Design","ProductDesign|Product Design","Animation|Animation"];
    }
    else if(mainMenu.value == "WebDesign") {
       var optionArray = ["Websites|Websites"];
    }
    
    //add second select Menu
    if(mainMenu.value == "GraphicDesign" || mainMenu.value == "Illustration" || mainMenu.value == "MotionGraphics" || mainMenu.value == "WebDesign") {
      subMenu.style.display="inline-block";
    } else {
      subMenu.style.display="none"; 
    }
    
    //loop through selected option
    for(var option in optionArray) {
        //splits the value and string
        var pair = optionArray[option].split("|");
        //create option element
        var newOption = document.createElement("option");
        //get the value
        newOption.value = pair[0];
        //get the string
        newOption.innerHTML = pair[1];
        //adds the options
        subMenu.options.add(newOption);
    }
}

function addSelection() {
 var html = '<tr><td><select class="custom-select" id="mediaSel"...