使用HTML和Javascript填充第三個下拉列表

我正在尋找基於第一個和第二個下拉列表中使用onchange（如果可能）的選擇填充第1,2個或第3個下拉列表。我已經研究了兩天，還沒有找到答案。使用HTML和Javascript填充第三個下拉列表

function populate(s1,s2){ 
 
    \t var s1 = document.getElementById(s1); 
 
    \t var s2 = document.getElementById(s2); 
 
    \t s2.innerHTML = ""; 
 
    
 
    \t if(s1.value == "317 Professional Liability Management Protection Program Coverages"){ 
 
    \t \t varS2 optionArray = ["|","n/a|N/A"]; 
 
    \t } else if(s1.value == "317 Professional Liability - Other than hospital, Healthcare, Physicians, Surgeons, and densits, and Management Protection Program"){ 
 
    \t \t var optionArray = ["|","n/a|N/A"]; 
 
    \t } else if(s1.value == "325 Special Classifications Liability"){ 
 
    \t \t var optionArray = ["|","products/completed|PRODUCTS/COMPLETED","all other|ALL OTHER"]; 
 
    \t } 
 
    \t for(var option in optionArray){ 
 
    \t \t var pair = optionArray[option].split("|"); 
 
    \t \t var newOption = document.createElement("option"); 
 
    \t \t newOption.value = pair[0]; 
 
    \t \t newOption.innerHTML = pair[1]; 
 
    \t \t s2.options.add(newOption); \t 
 
    \t } 
 
    }

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

來源

2017-02-21 amandabcote

on line 11你有一個錯字：'vars2 optionArray' - >'var optionArray' – Sylvain

我不確定要理解你想要什麼。你能提供更多細節嗎？第二個下拉列表根據第一個...的更改而變化您是否希望在第二個列表更改時更改第三個列表？ – Sylvain

嗨Sylvain，這正是我正在尋找的。謝謝。 – amandabcote

其中的一個問題是，你的函數（填充）只有兩個參數。但是，考慮重新思考整個業務邏輯，你很快就會失去這種方法。

來源

2017-02-21 17:25:06 dkellner

我的業務需求是確保編碼人員根據這些下拉選擇正確的編碼標準。由於我在編碼技能方面非常有限，因此很難對錯誤類型的錯誤進行編碼，所以我很難考慮採用不同的方法。我的第一個方法涉及Excel數據驗證，它非常快速地變得非常混亂。 – amandabcote

不想聽起來像判斷你。當然這並不容易，尤其對於一個沒有經驗的編碼人員來說更是如此。但是，如果您可以（例如）在單個頁面上準備好所有可能的下拉菜單，那麼您就可以設置 - 從這裏開始，這只是隱藏/顯示

使用HTML和Javascript填充第三個下拉列表

回答