如何向下拉列表添加选项从另一个下拉列表中选择并让第二个下拉列表在更改时填充特定的 div 内容答案

【问题标题】：How to add options to dropdown select from another dropdown and have second dropdown populate specific div content on change如何向下拉列表添加选项从另一个下拉列表中选择并让第二个下拉列表在更改时填充特定的 div 内容
【发布时间】：2026-01-02 07:55:01
【问题描述】：

我正在尝试创建一个包含两个相关下拉列表的表单。根据第二个下拉选择，我希望它填充与所选项目相关的隐藏 <div>，以便用户可以完成表单提交。

// 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>

【问题讨论】：

标签： javascript jquery html css forms

【解决方案1】：

欢迎来到堆栈溢出！您的代码有几个问题：

您的第一个选择元素的 id 有错字：cateory1 应该是 category1。
您缺少一个结束表单标记 `，但这是次要的，不应该破坏任何东西。

这应该让你的两个下拉选择工作。

接下来，您可以将onchange="doSomething()" 回调添加到您的第二个选择中，以便当它发生变化时您可以调用一个函数来执行您需要的操作，即填充特定的 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>

【讨论】：