如何用javascript制作必填的子类别？

// HTML代码
<form id="myForm">
  <label for="category">主类别：</label>
  <select id="category" onchange="updateSubcategory()">
    <option value="">请选择</option>
    <option value="1">类别1</option>
    <option value="2">类别2</option>
    <option value="3">类别3</option>
  </select>
  <br>
  <label for="subcategory">子类别：</label>
  <select id="subcategory" required>
    <option value="">请选择</option>
  </select>
  <br>
  <input type="submit" value="提交">
</form>

// JavaScript代码
function updateSubcategory() {
  var category = document.getElementById("category").value;
  var subcategorySelect = document.getElementById("subcategory");
  
  // 清空子类别选项
  subcategorySelect.innerHTML = "";
  
  // 根据主类别选择对应的子类别
  if (category === "1") {
    var option1 = document.createElement("option");
    option1.value = "1-1";
    option1.text = "子类别1-1";
    subcategorySelect.appendChild(option1);
    
    var option2 = document.createElement("option");
    option2.value = "1-2";
    option2.text = "子类别1-2";
    subcategorySelect.appendChild(option2);
  } else if (category === "2") {
    var option3 = document.createElement("option");
    option3.value = "2-1";
    option3.text = "子类别2-1";
    subcategorySelect.appendChild(option3);
    
    var option4 = document.createElement("option");
    option4.value = "2-2";
    option4.text = "子类别2-2";
    subcategorySelect.appendChild(option4);
  } else if (category === "3") {
    var option5 = document.createElement("option");
    option5.value = "3-1";
    option5.text = "子类别3-1";
    subcategorySelect.appendChild(option5);
    
    var option6 = document.createElement("option");
    option6.value = "3-2";
    option6.text = "子类别3-2";
    subcategorySelect.appendChild(option6);
  }
}

// 表单提交时验证子类别是否选择
document.getElementById("myForm").addEventListener("submit", function(event) {
  var subcategory = document.getElementById("subcategory").value;
  if (subcategory === "") {
    alert("请选择子类别");
    event.preventDefault(); // 阻止表单提交
  }
});