如何添加選項到下拉選擇從另一個下拉列表中，並有第二個下拉列表填充特定的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內容

回答

相關問題