使用HTML和Javascript填充第3个下拉列表
[英]Populate 3rd drop down list using HTML and Javascript
问题描述
我希望根据可能的情况，使用onchange从第一个和第二个下拉列表中进行选择，以第1个，第2个或第3个下拉列表填充第三个下拉列表。 我已经研究了两天，但还没有找到答案。
function populate(s1,s2){ var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if(s1.value == "317 Professional Liability Management Protection Program Coverages"){ varS2 optionArray = ["|","n/a|N/A"]; } else if(s1.value == "317 Professional Liability - Other than hospital, Healthcare, Physicians, Surgeons, and densits, and Management Protection Program"){ var optionArray = ["|","n/a|N/A"]; } else if(s1.value == "325 Special Classifications Liability"){ var optionArray = ["|","products/completed|PRODUCTS/COMPLETED","all other|ALL OTHER"]; } for(var option in optionArray){ var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } }
<body> <h2>Type of Loss</h2> Choose Subline: <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"> <option value=""></option> <option Value="317 Professional Liability Management Protection Program Coverages">317 Professional Liability Management Protection Program Coverages</option> <option Value="317 Professional Liability - Other than hospital, Healthcare, Physicians, Surgeons, and densits, and Management Protection Program">317 Professional Liability - Other than hospital, Healthcare, Physicians, Surgeons, and densits, and Management Protection Program</option> <option Value="325 Special Classifications Liability">325 Special Classifications Liability</option> <option Value="325 E-Commerce">325 E-Commerce</option> <option Value="332 Liquor Law Liability">332 Liquor Law Liability</option> <option Value="334 Premises/Operations Liability">334 Premises/Operations Liability</option> <option Value="335 Owners/Contractors Protective Liability">335 Owners/Contractors Protective Liability</option> <option Value="336 Products/Completed Operations Liability">336 Products/Completed Operations Liability</option> <option Value="342 Composite Large "a" Rated Risks">342 Composite Large "a" Rated Risks</option> <option Value="343 Composite Loss Rated Risks">343 Composite Loss Rated Risks</option> <option Value="345 All Other Composite Rated Risks:Premises/Operations – only coverage">345 All Other Composite Rated Risks:Premises/Operations – only coverage</option> <option Value="346 All Other Composite Rated Risks:Products/Completed Operations – only coverage">346 All Other Composite Rated Risks:Products/Completed Operations – only coverage</option> <option Value="347 All Other Composite Rated Risks:Premises/Operations and Products/Completed Operations coverage">347 All Other Composite Rated Risks:Premises/Operations and Products/Completed Operations coverage</option> <option Value="350 Pollution Liability">350 Pollution Liability</option> <option Value="360 Employment Related Practices Liability">360 Employment Related Practices Liability</option> <option Value="365 Product Withdrawal Coverage (ISO Endorsements CG 04 36 and CG 00 66 or company equivalent)">365 Product Withdrawal Coverage (ISO Endorsements CG 04 36 and CG 00 66 or company equivalent</option> <option Value="337 Farm and CGL Farm Liability Premises/Operations/Products (1998 Program)">337 Farm and CGL Farm Liability Premises/Operations/Products (1998 Program)</option> <option Value="338 Farm and CGL Farm Liability Premises/Operations CGL Liability (1998 Program)">338 Farm and CGL Farm Liability Premises/Operations CGL Liability (1998 Program)</option> <option Value="339 Farm and CGL Farm Liability Products CGL Liability (1998 Program)">339 Farm and CGL Farm Liability Products CGL Liability (1998 Program)</option> <option Value="334 Farm and CGL Farm Liability Premises/Operations Liability (pre-1998 Program)">334 Farm and CGL Farm Liability Premises/Operations Liability (pre-1998 Program)</option> <option Value="336 Farm and CGL Farm Liability Products/Completed Liability (pre-1998 Program)">336 Farm and CGL Farm Liability Products/Completed Liability (pre-1998 Program)</option> <option Value="366 Farm and CGL Farm Liability Limited Product Withdrawal Expense Coverage (ISO Endorsement FL 04 02 or company equivalent)">366 Farm and CGL Farm Liability Limited Product Withdrawal Expense Coverage (ISO Endorsement FL 04 02 or company equivalent)</option> </select> <div> Choose Products/Completed, All Other: <select id="slct2" name="slct2" onchange="populate(this.id,'slct2','slct3')"></select> </div> Choose BI, PD, Other: <select id="slct3" name="slct3"></select> </body>
2 个解决方案
解决方案1
0 2017-02-21 17:25:06
问题之一是您的函数（填充）只有两个参数。 但是考虑稍微重新考虑整个业务逻辑，这种方法很快就会使您迷失方向。
解决方案2
0 2017-02-21 17:47:47
我同意dkellner的观点，即您可能想重新考虑所有过程。
您遇到的主要问题是，由于仅填充了一个函数，并且此函数擦除了所有第二个拖放列表内容，因此您永远不会知道它的价值。 您应该尝试使用两个不同的函数：-当s1值更改时，将调用populateS2(s1) {...} ，擦除s2和s3并设置s2选项。 -当s2更改时，将调用populateS3 (s1, s2) {...} ，擦除s3并根据s1和s2的值设置s3的选项。
如何使用JavaScript在HTML5中填充下拉列表？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.