下拉选择州和学校后，按钮未跳转至指定URL的问题

问题原因 #

1. 表单默认提交行为：按钮嵌套在<form>标签中，点击时触发表单默认提交动作，导致页面刷新，中断跳转逻辑。
2. 学校匹配逻辑错误：生成学校选项时，option.value被设置为学校的URL，但点击事件中错误地用school.name === schoolSelect.value进行匹配，无法找到对应学校，跳转代码无法执行。

修复方案 #

1. 阻止表单默认提交

给按钮添加type="button"属性，避免触发表单提交；或在点击事件中调用event.preventDefault()。

2. 修正跳转逻辑

学校选择框的value已经是目标URL，直接使用该值跳转即可，无需再从数组中查找。

修复后的完整代码 #

HTML

<form>
  <label for="state-select"></label>
  <select id="state-select">
    <option value="">Select a state</option>
  </select>

  <label for="school-select"></label>
  <select id="school-select">
    <option value="">Select a school</option>
  </select>

  <!-- 添加type="button"阻止表单提交 -->
  <button id="start-shopping" disabled type="button">Start Shopping</button>
</form>

CSS

label {
  font-size: 20px;
  color: black;
  display: inline-block;
  margin-bottom: 10px;
}

select {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: 2px solid black;;
  background-color: white;
  color: black;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

/* Style for the buttons */
button {
  font-size: 5px;
  padding: 15px 30px;
  border-radius: 0;
  border: none;
  background-color: grey;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

/* Style for the start shopping button */
#start-shopping {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: none;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

JavaScript

// Define schools data
const schools = [
  { name: "HLS Louisville", url: "https://highlandsuniforms.com/louisville/", state: "KY" },
  { name: "HL Cottage School Louisville", url: "https://highlandsuniforms.com/hlcs-louisville/", state: "KY" },
  { name: "HLS Beaufort", url: "https://highlandsuniforms.com/beaufort/", state: "SC" },
  { name: "HLS Billings, MT", url: "https://highlandsuniforms.com/hls-billings-mt/", state: "MT" },
  { name: "HLS Charleston, SC", url: "https://highlandsuniforms.com/charleston-sc/", state: "SC" },
  { name: "HLS Summerville, SC", url: "https://highlandsuniforms.com/highlands-latin-school-summerville/", state: "SC" },
  { name: "HLS Ft. Myers, FL", url: "https://highlandsuniforms.com/hls-ft-myers-fl/", state: "FL" },
  { name: "HLS Houston", url: "https://highlandsuniforms.com/hls-houston/", state: "TX" },
  { name: "HLS Indianapolis", url: "https://highlandsuniforms.com/indianapolis", state: "IN" },
  { name: "HLS Orlando", url: "https://highlandsuniforms.com/orlando/", state: "FL" },
  { name: "HLS Southern California", url: "https://highlandsuniforms.com/southern-california", state: "CA" },
  { name: "Archangels Academy", url: "https://highlandsuniforms.com/archangels", state: "IL" },
  { name: "Lexington Latin School", url: "https://highlandsuniforms.com/lexington-latin", state: "KY" },
  { name: "Northstar Classical School", url: "https://highlandsuniforms.com/northstar-classical-school/", state: "MN" }
];

// Get DOM elements
const stateSelect = document.getElementById("state-select");
const schoolSelect = document.getElementById("school-select");
const startShoppingButton = document.getElementById("start-shopping");

// Populate state options
const states = [...new Set(schools.map(school => school.state))];
states.forEach(state => {
  const option = document.createElement("option");
  option.value = state;
  option.textContent = state;
  stateSelect.appendChild(option);
});

// Reset school options when state changes
stateSelect.addEventListener("change", function () {
  // Reset school options
  schoolSelect.innerHTML = "<option value=''>Select a school</option>";
  startShoppingButton.disabled = true;

  // Populate school options for selected state
  const selectedState = stateSelect.value;
  const schoolsInState = schools.filter(school => school.state === selectedState);
  schoolsInState.forEach(school => {
    const option = document.createElement("option");
    option.value = school.url;
    option.textContent = school.name;
    schoolSelect.appendChild(option);
  });
});

// Enable start shopping button when a school is selected
schoolSelect.addEventListener("change", function () {
  startShoppingButton.disabled = !schoolSelect.value;
});

// Redirect to selected school's URL when "Start Shopping" button is clicked
startShoppingButton.addEventListener("click", function () {
  const targetUrl = schoolSelect.value;
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

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