如何为下拉菜单添加选项，请从另一个下拉菜单中进行选择，并让第二个下拉列表填充更改时的特定div内容
[英]How to add options to dropdown select from another dropdown and have second dropdown populate specific div content on change
问题描述
我正在尝试创建具有两个相关下拉菜单的表单。 基于第二个下拉选择，我希望它填充与所选项目相关的隐藏<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>
1 个解决方案
解决方案1
1 2017-03-01 02:02:44
欢迎使用Stack Overflow！ 您的代码有几个问题：
- 您的第一个select元素的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>
如何基于另一个下拉选择动态填充的下拉列表中选择？
[英]How to dynamically populate options on dropdown lists based on selection in another dropdown?
根据下拉选择填充数据库中的另一个选择下拉菜单
[英]Populate another select dropdown from database based on dropdown selection
如何根据另一个下拉菜单的选择填充多个下拉菜单
[英]how to populate multiple dropdown depending on the select of another dropdown
从第一个下拉列表中选择后，如何将li值填充到另一个下拉列表中？
[英]How to populate li value into another dropdown after you select from first dropdown?
如何通过从另一个下拉列表中选择值来填充下拉列表？
[英]How to populate a dropdown list by selecting the value from another dropdown list?
如何在Rails中将项目从一种形式添加到另一种形式的下拉选项中
[英]How to add item from one form to the dropdown options in another in Rails
更改另一个下拉框时如何更改下拉内容和图像？
[英]How to change dropdown content and an image when another dropdown box is changed?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.