JavaScript动态下拉列表问题：首个下拉框未显示院系名称

Hey there, let's sort out this dropdown problem you're dealing with! The issue you described—where the first dropdown shows blank options but still correctly loads the corresponding schools when selected—points to a simple fix in your HTML markup, not your JavaScript function.

What's Going On? #

Your populate() function works because it checks the value of the selected option from the first dropdown. Even if the option's visible text is missing, as long as the value attribute is set correctly (like "Faculty of Arts, Humanities and Social Sciences"), the function can still fetch the right schools. The blank display is just because your <option> tags aren't including the actual faculty name as their inner text.

The Fix #

Take a look at your first dropdown's HTML. It probably looks something like this right now:

<select id="s1">
  <option value="Faculty of Arts, Humanities and Social Sciences"></option>
  <!-- More blank options for other faculties -->
</select>

All you need to do is add the faculty name as the text inside each <option> tag, like so:

<select id="s1">
  <option value="Faculty of Arts, Humanities and Social Sciences">Faculty of Arts, Humanities and Social Sciences</option>
  <option value="Faculty of Science">Faculty of Science</option>
  <!-- Add text for all other faculty options -->
</select>

Why This Works #

Your JavaScript function uses s1.value to determine which schools to load, and that value is already correct. Adding the inner text just makes the faculty name visible to users, so they don't have to guess which blank option corresponds to which faculty.

Your existing populate() function doesn't need any changes—this is purely a fix to the HTML structure of your first dropdown.

内容的提问来源于stack exchange，提问作者Simon C