如何添加选项到下拉选择从另一个下拉列表中，并有第二个下拉列表填充特定的div内容

我想创建一个具有两个依赖下拉列表的表单。基于第二个下拉选择，我希望它填充与选定项目相关的隐藏<div>，以便用户可以完成表单提交。如何添加选项到下拉选择从另一个下拉列表中，并有第二个下拉列表填充特定的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>

来源

2017-03-01 Chris.Beginner

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

您的第一选择元素的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>

来源

2017-03-01 02:02:44 jverban

如何添加选项到下拉选择从另一个下拉列表中，并有第二个下拉列表填充特定的div内容

回答

相关问题