CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Chris.Beginner
Chris.Beginner

Reputation: 1

How to add options to dropdown select from another dropdown and have second dropdown populate specific div content on change

I'm trying to create a form with two dependent dropdowns. Based off the second dropdown selection I want it to populate a hidden <div> correlating to the selected item so the user can complete the form submission.

// Script for prefilling date
var today = new Date();
document.getElementById("toDate").value = (today.getMonth()+1) + "-" +
   parseInt(today.getDate()) + "-" + today.getFullYear();

// Script for dependent Select option fields
var category1AndCategory2 = {};
category1AndCategory2['select'] = ['Select...'];
category1AndCategory2['empsupp'] = ['Select...', 'BCP', 'Employee Change', 'Forecasting Adjustment', 'Schedule Analysis', 'Shift/Slot Bid(s)','Staffing Impact/Review'];
category1AndCategory2['idsupp'] = ['Select...','Additional Session', 'Deactivate User', 'New User', 'Reset User'];
category1AndCategory2['repsupp'] = ['Select...','Modify Existing Report', 'Question Existing Report', 'Request New Report'];
category1AndCategory2['syssupp'] = ['Select...','CC Pulse','Filenet','IVR','Telephony','Verint Recording'];
category1AndCategory2['telsupp'] = ['Select...','Avaya','CC Pulse','Geneysis','IVR','Menu Prompt Verbiage Change','Phone Shutdown Request','Schedule Analysis','Skill Changes/Review','Verint Recording'];
category1AndCategory2['worksupp'] = ['Select...','BIE','CLS','Filenet'];

function ChangeCategoryList() {
  var category1List = document.getElementById("category1");
  var category2List = document.getElementById("category2");
  var selCategory = category1List.options[category1List.selectedIndex].value;
  while (category2List.options.length) {
    category2List.remove(0);
  }
  var cat1 = category1AndCategory2[selCategory];
  if (cat1) {
    var i;
    for (i = 0; i < cat1.length; i++) {
      var category1 = new Option(cat1[i], i);
      category2List.options.add(category1);
    }
  }
}
<!DOCTYPE html>
<html>
<body>
<div id="formcontainer">
  <form>
    <!-- Text input fields -->
    <input type="date" id="toDate" name="currentdate" disabled>
    <input type="text" id="name" name="username" placeholder="Your full name..">
    <input type="email" id="email" name="useremail" placeholder="Your email..">
    <input type="tel" id="tele" name="telephone" placeholder="Your phone number..">
    
    <!-- Drop Down menus -->        
    <select id="cateory1" onchange="ChangeCategoryList()">
      <option value="select" selected>Select...</option>
      <option value="empsupp">Employee Support</option>
      <option value="idsupp">ID Requests</option>
      <option value="repsupp">Reporting Support</option>
      <option value="syssupp">System Support</option>
      <option value="telsupp">Telephone Support</option>
      <option value="worksupp">Workflow Support</option>
    </select>
    
    <select id="category2" name="category2">
      <option value="select" selected>Select...</option>
    </select>
        
    <!-- correlating items for bcp select option -->        
    <div id="BCP" style="display:none;">
      <input type="checkbox" name="updateplan" value="empsupp">Request to update plan <br>
      <input type="checkbox" name="meetingreview" value="empsupp">Request for meeting/review <br>
      <textarea name="bcpmess" rows="10" cols="20" placeholder="Input text..."></textarea>
    </div>
    
    <!-- correlating items for forecasting adjustment select option -->
    <div id="forcasting" style="display:none;">
      <input type="text" name="department" placeholder="Input department...">
      <input type="text" name="location" placeholder="Input location...">
      <textarea name="foremess" rows="10" cols="20" placeholder="Input text..."></textarea>
    </div>

</body>
</html>

Upvotes: 0

Views: 64

Answers (1)

Nicholas.V
Nicholas.V

Reputation: 1936

welcome to Stack Overflow! There are a couple issues with your code:

  • The id of your first select element has a typo: cateory1 should be category1.
  • You are missing a closing form tag `, but that is minor and should not be breaking anything.

That should get your two dropdown select working.

Next, you can add an onchange="doSomething()" callback to your second select so that when it changes you can call a function to perform the action you require i.e populating a specific div.

// Script for dependent Select option fields
var category1AndCategory2 = {};
category1AndCategory2['select'] = ['Select...'];
category1AndCategory2['empsupp'] = ['Select...', 'BCP', 'Employee Change', 'Forecasting Adjustment', 'Schedule Analysis', 'Shift/Slot Bid(s)','Staffing Impact/Review'];
category1AndCategory2['idsupp'] = ['Select...','Additional Session', 'Deactivate User', 'New User', 'Reset User'];
category1AndCategory2['repsupp'] = ['Select...','Modify Existing Report', 'Question Existing Report', 'Request New Report'];
category1AndCategory2['syssupp'] = ['Select...','CC Pulse','Filenet','IVR','Telephony','Verint Recording'];
category1AndCategory2['telsupp'] = ['Select...','Avaya','CC Pulse','Geneysis','IVR','Menu Prompt Verbiage Change','Phone Shutdown Request','Schedule Analysis','Skill Changes/Review','Verint Recording'];
category1AndCategory2['worksupp'] = ['Select...','BIE','CLS','Filenet'];

function ChangeCategoryList() {
  var category1List = document.getElementById("category1");
  var category2List = document.getElementById("category2");
  var selCategory = category1List.options[category1List.selectedIndex].value;
  while (category2List.options.length) {
    category2List.remove(0);
  }
  var cat1 = category1AndCategory2[selCategory];
  if (cat1) {
    var i;
    for (i = 0; i < cat1.length; i++) {
      var category1 = new Option(cat1[i], i);
      category2List.options.add(category1);
    }
  }
}

function doSomething(select) {
  alert(select.value);
}
<!DOCTYPE html>
<html>
<body>
<div id="formcontainer">
  <form>
    <!-- Drop Down menus -->        
    <select id="category1" onchange="ChangeCategoryList()">
      <option value="select" selected>Select...</option>
      <option value="empsupp">Employee Support</option>
      <option value="idsupp">ID Requests</option>
      <option value="repsupp">Reporting Support</option>
      <option value="syssupp">System Support</option>
      <option value="telsupp">Telephone Support</option>
      <option value="worksupp">Workflow Support</option>
    </select>
    
    <select id="category2" name="category2" onchange="doSomething(this)">
      <option value="select" selected>Select...</option>
    </select>
  </form>
</body>
</html>

Upvotes: 1

Related Questions