본문 바로가기
IT창고/HTML

select 선택 div 보이기 사라지기

by 창구창고 2023. 2. 8.

📑 목차

    반응형

    Javascript 이용 방법:

    HTML

    <select id="selectOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    
    <div id="option1" style="display: none;">This is Option 1 content</div>
    <div id="option2" style="display: none;">This is Option 2 content</div>
    <div id="option3" style="display: none;">This is Option 3 content</div>

     

    Javascript

    document.getElementById("selectOption").addEventListener("change", function() {
      var selectedOption = this.value;
      document.getElementById("option1").style.display = "none";
      document.getElementById("option2").style.display = "none";
      document.getElementById("option3").style.display = "none";
      document.getElementById(selectedOption).style.display = "block";
    });

     

    Jquery 이용방법:

    HTML

    <select id="selectOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    
    <div id="option1">This is Option 1 content</div>
    <div id="option2">This is Option 2 content</div>
    <div id="option3">This is Option 3 content</div>

    Jquery

    $("#selectOption").change(function() {
      var selectedOption = $(this).val();
      $("#option1, #option2, #option3").hide();
      $("#" + selectedOption).show();
    });
    반응형

    "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."