만드는 방법: 캐리어 드롭다운 목록

세 개의 드롭다운 목록을 생성합니다

HTML 퍼미션 내에 세 개의 드롭다운 목록을 생성합니다.

두 번째와 세 번째 드롭다운 목록은 부모 드롭다운 목록에서 선택한 값에 따라 다른 옵션을 표시합니다.

第一步 - 추가 HTML：

<form name="form1" id="form1" action="/action_page.php">
  주제: <select name="subject" id="subject">
    <option value="" selected="selected">주제 선택</option>
  </select>
  <br><br>
  주제: <select name="topic" id="topic">
    <option value="" selected="selected">먼저 주제를 선택하세요</option>
  </select>
  <br><br>
  장: <select name="chapter" id="chapter">
    <option value="" selected="selected">먼저 주제를 선택하세요</option>
  </select>
  <br><br>
  <input type="submit" value="제출">
</form>

第二步 - 추가 JavaScript：

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["경계", "여백", "배경", "浮动"]
    "JavaScript": ["변수", "연산자", "함수", "조건"]
  },
  "백엔드": {
    "PHP": ["변수", "문자열", "배열"],
    "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() {
    // '장'과 '주제' 드롭다운 메뉴를 비우기
    chapterSel.length = 1;
    topicSel.length = 1;
    // 올바른 값을 표시
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // '장' 드롭다운 메뉴를 비우기
    chapterSel.length = 1;
    // 올바른 값을 표시
    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]);
    }
  }
}

본인이 직접 시도해 보세요

관련 페이지

教程：CSS 드롭다운 메뉴

教程：스페셜한 드롭다운 메뉴