Javascript 表单 Select 更改选项动态列表错误

Question

我在下面遇到的唯一问题是第一个下拉列表没有在第一个下拉列表中显示教员姓名。 However, when selected (first blank option) it returns the schools from that particular faculty.我觉得这是非常小的事情，所以任何反馈都将不胜感激。

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>

Answer 1

您将要显示的文本放在选项标签之间。

该值未显示，它不是必需的，但它通常是一个较短的代码，用于决定选择的内容，使您的代码更清晰。示例：

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

Javascript 表单 Select 更改选项动态列表错误

Javascript Form Select Change Options Dynamic List Error

javascript

forms

select

dynamic

options