Cách tạo: Danh sách rút gọn nối tiếp

Tạo ba danh sách rút gọn

Tạo ba danh sách rút gọn trong biểu mẫu HTML.

Hai và ba danh sách rút gọn sẽ hiển thị các tùy chọn khác nhau, tùy thuộc vào giá trị được chọn trong danh sách rút gọn cha.

Bước 1 - Thêm HTML：

<form name="form1" id="form1" action="/action_page.php">
  Chủ đề: <select name="subject" id="subject">
    <option value="" selected="selected">Chọn chủ đề</option>
  </select>
  <br><br>
  Chủ đề: <select name="topic" id="topic">
    <option value="" selected="selected">Vui lòng chọn chủ đề trước</option>
  </select>
  <br><br>
  Chương: <select name="chapter" id="chapter">
    <option value="" selected="selected">Vui lòng chọn chủ đề trước</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Bước 2 - Thêm JavaScript：

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Biên", "Khoảng cách", "Nền", "Float"]
    "JavaScript": ["Biến", "Toán tử", "Hàm", "Điều kiện"]
  },
  "Back-end": {
    "PHP": ["Biến", "Chuỗi", "Mảng"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // Xóa sạch mục chọn "Chương" và "Chủ đề"
    chapterSel.length = 1;
    topicSel.length = 1;
    // Hiển thị giá trị chính xác
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // Xóa sạch mục chọn "Chương"
    chapterSel.length = 1;
    // Hiển thị giá trị chính xác
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

Thử trực tiếp

Trang liên quan

Hướng dẫn:Menu thả xuống CSS

Hướng dẫn:Cách tạo menu thả xuống có thể trượt