我遇到的唯一问题是第一个下拉菜单没有在第一个下拉列表中显示教师姓名。但是，当选择（第一个空白选项）时，它将返回该特定教师的学校。我觉得它很小，所以任何反馈都会受到赞赏。
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Faculty of Arts, Humanities and Social Sciences") {
var optionArray = ["|", "schoolOfArt|School of Art", "schoolOfArtsAndHumanities|School of Arts and Humanities", "schoolOfCommunicationAndMedia|School of Communication and Media", "schoolOfEducation|School of Education", "schoolOfLaw|School of Law", "schoolOfAppliedSocialAndPolicySciences|School of Applied Social and Policy Sciences"];
} else if (s1.value == "Faculty of Computing, Engineering and the Built Environment") {
var optionArray = ["|", "schoolOfComputing|School of Computing", "schoolOfComputingEngineeringAndIntelligentSystems|School of Computing, Engineering and Intelligent Systems", "schoolOfEngineering|School of Engineering", "School of Architecture and the Built Environment|schoolOfArchitectureAndTheBuiltEnvironment"];
} else if (s1.value == "Faculty of Life & Health Sciences") {
var optionArray = ["|", "schoolOfBiomedicalSciences|School of Biomedical Sciences", "schoolOfGeographyEnvironmentalSciences|School of Geography & Environmental Sciences", "schoolOfHealthSciences|School of Health Sciences", "schoolOfNursing|School of Nursing", "schoolOfPharmacyAndPharmaceuticalSciences|School of Pharmacy & Pharmaceutical Sciences", "schoolOfPsychology|School of Psychology", "schoolOfSport|School of Sport"];
} else if (s1.value == "Ulster University Business School") {
var optionArray = ["|", "departmentOfAccountingFinanceAndEconomics|Department of Accounting, Finance and Economics", "departmentOfGlobalBusinessAndEnterprise|Department of Global Business and Enterprise", "departmentOfHospitalityTourismManagement|Department of Hospitality & Tourism Management", "departmentOfManagementLeadershipAndMarketing|Department of Management, Leadership and Marketing"];
}
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);
}
}<html>
<body>
<h2>Select your Faculty:</h2>
<hr/> Choose Faculty:
<select id="select1" name="select1" onchange="populate('select1', 'select2')">
<option value=""></option>
<option value="Faculty of Arts, Humanities and Social Sciences"></option>
<option value="Faculty of Computing, Engineering and the Built Environment"></option>
<option value="Faculty of Life & Health Sciences"></option>
<option value="Ulster University Business School"></option>
</select>
<hr/> Choose School:
<select id="select2" name="select2"></select>
<hr/>
</body>
</html>
答案 0 :(得分：0)
您将要显示的文本放在选项标记之间。
未显示该值不是必需的，但它通常是一个较短的代码，用于决定选择的内容，使您的代码更清晰。例如：
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "0") {
var optionArray = ["|", "schoolOfArt|School of Art", "schoolOfArtsAndHumanities|School of Arts and Humanities", "schoolOfCommunicationAndMedia|School of Communication and Media", "schoolOfEducation|School of Education", "schoolOfLaw|School of Law", "schoolOfAppliedSocialAndPolicySciences|School of Applied Social and Policy Sciences"];
} else if (s1.value == "1") {
var optionArray = ["|", "schoolOfComputing|School of Computing", "schoolOfComputingEngineeringAndIntelligentSystems|School of Computing, Engineering and Intelligent Systems", "schoolOfEngineering|School of Engineering", "School of Architecture and the Built Environment|schoolOfArchitectureAndTheBuiltEnvironment"];
} else if (s1.value == "2") {
var optionArray = ["|", "schoolOfBiomedicalSciences|School of Biomedical Sciences", "schoolOfGeographyEnvironmentalSciences|School of Geography & Environmental Sciences", "schoolOfHealthSciences|School of Health Sciences", "schoolOfNursing|School of Nursing", "schoolOfPharmacyAndPharmaceuticalSciences|School of Pharmacy & Pharmaceutical Sciences", "schoolOfPsychology|School of Psychology", "schoolOfSport|School of Sport"];
} else if (s1.value == "3") {
var optionArray = ["|", "departmentOfAccountingFinanceAndEconomics|Department of Accounting, Finance and Economics", "departmentOfGlobalBusinessAndEnterprise|Department of Global Business and Enterprise", "departmentOfHospitalityTourismManagement|Department of Hospitality & Tourism Management", "departmentOfManagementLeadershipAndMarketing|Department of Management, Leadership and Marketing"];
}
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);
}
}<html>
<body>
<h2>Select your Faculty:</h2>
<hr/> Choose Faculty:
<select id="select1" name="select1" onchange="populate('select1', 'select2')">
<option value=""></option>
<option value="0">Faculty of Arts, Humanities and Social Sciences</option>
<option value="1">Faculty of Computing, Engineering and the Built Environment</option>
<option value="2">Faculty of Life & Health Sciences</option>
<option value="3">Ulster University Business School</option>
</select>
<hr/> Choose School:
<select id="select2" name="select2"></select>
<hr/>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option