Question

我希望根据第一个和第二个下拉列表中的选择使用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>

Answer 1

其中一个问题是你的函数（populate）只有两个参数。但是考虑重新考虑整个业务逻辑，你很快就会用这种方法失去轨道。

Answer 2

我同意dkellner关于你可能想要重新思考所有过程的事实。

您遇到的主要问题是，由于您只有一个函数填充，并且此函数会清除所有第二个删除列表内容，因此您永远不会知道它的值是什么。您应该尝试使用两个不同的功能： - 当s1值改变时，将调用populateS2(s1) {...}，擦除s2和s3并设置s2选项。 - 当s2改变时，将调用populateS3 (s1, s2) {...}，擦除s3并根据s1和s2的值设置s3的选项。

使用HTML和Javascript填充第3个下拉列表

2 个答案: