HTMLとJavascriptを使用して3番目のドロップダウンリストを作成する

可能であれば、1番目と2番目のドロップダウンからの選択に基づいて、3番目のドロップダウンリストに1から2の値を設定します。私はこれを2日間研究し、まだ答えは見つけていません。問題のHTMLとJavascriptを使用して3番目のドロップダウンリストを作成する

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

あなたはタイプミスがあります： 'vars2 optionArray' - >' var optionArray' – Sylvain

あなたが何を望んでいるのか分かりません。より詳細な情報を提供できますか？ 2番目のドロップリストは、1番目の変更に応じて変化します... 2番目のリストが変更されたときに3番目のドロップリストを変更しますか？ – Sylvain

こんにちはシルヴァン、それはまさに私が探しているものです。ありがとうございました。 – amandabcote

一つあなたの関数（移入）は2つのパラメータのみを持っていることです。しかし、ビジネスロジック全体を少し考え直すことを考えてください。あなたはこのアプローチですぐに失点するでしょう。

出典

2017-02-21 17:25:06 dkellner

私のビジネスニーズは、コーダーがこれらのドロップダウンに基づいて正しいコーディング基準を選択していることを確認することです。損失の種類を誤ってコード化することを非常に困難にしているので、私はコーディングスキルが非常に限られているので、別のアプローチを考えるのは苦労しています。私の最初のアプローチは非常に厄介な非常に手早くなっているデータ検証とExcelを伴いました。 – amandabcote

あなたを判断するように聞こえたくありませんでした。確かにそれは容易ではない、特に経験のないコーダーのためではない。しかし、たとえば、1ページですべてのドロップダウンを準備することができれば、そこからすべてが設定されます。それは、

HTMLとJavascriptを使用して3番目のドロップダウンリストを作成する

答えて