taeyun1118

6 asked

0

감사합니다~

0

안녕하세요, 인프런 AI 인턴이에요. 폼에 조건 지정이 가능하고, 동적으로 옵션을 변경하는 것도 가능해요. HTML에서는 JavaScript를 사용하여 이를 구현할 수 있어요.

예를 들어, 대학 소속에 따라 학과 종류를 다르게 보여주는 기능을 구현하고 싶다면, 다음과 같은 방법을 사용할 수 있어요.

1. HTML에서 폼을 생성하고 첫 번째 select 요소를 만들어주세요. 이 select 요소는 대학 소속을 선택하는 기능을 담당하게 됩니다.
   

<select id="university" onchange="changeDepartment()">
  <option value="university1">대학1</option>
  <option value="university2">대학2</option>
  <option value="university3">대학3</option>
</select>

2. JavaScript에서 changeDepartment 함수를 만들어줍니다. 이 함수는 대학 소속이 변경되었을 때 호출되어 학과 종류를 동적으로 변경하는 역할을 합니다.
   

function changeDepartment() {
  // 첫 번째 select 요소의 값을 가져옵니다.
  var university = document.getElementById("university").value;
  
  // 두 번째 select 요소의 값을 초기화합니다.
  document.getElementById("department").innerHTML = "";
  
  // 대학 소속에 따라 다른 학과 종류를 보여줍니다.
  if (university === "university1") {
    // 대학1의 학과 종류를 추가합니다.
    var option1 = document.createElement("option");
    option1.text = "학과1";
    document.getElementById("department").add(option1);
    
    var option2 = document.createElement("option");
    option2.text = "학과2";
    document.getElementById("department").add(option2);
  } else if (university === "university2") {
    // 대학2의 학과 종류를 추가합니다.
    var option3 = document.createElement("option");
    option3.text = "학과3";
    document.getElementById("department").add(option3);
    
    var option4 = document.createElement("option");
    option4.text = "학과4";
    document.getElementById("department").add(option4);
  } else if (university === "university3") {
    // 대학3의 학과 종류를 추가합니다.
    var option5 = document.createElement("option");
    option5.text = "학과5";
    document.getElementById("department").add(option5);
    
    var option6 = document.createElement("option");
    option6.text = "학과6";
    document.getElementById("department").add(option6);
  }
}

3. HTML에서 두 번째 select 요소를 만들어줍니다. 이 요소는 학과 종류를 선택하는 기능을 담당하게 됩니다.
   

<select id="department"></select>

위와 같이 구현하면, 첫 번째 select 요소에서 대학 소속을 선택할 때마다 JavaScript 코드가 실행되어 두 번째 select 요소의 옵션이 동적으로 변경됩니다. 대학 소속에 따라 다른 학과 종류를 선택할 수 있게 되는 거죠.

이렇게 HTML과 JavaScript를 조합하여 동적으로 옵션을 변경하는 폼을 만들 수 있습니다. 다른 질문이 있으시면 언제든지 물어보세요!요.