-
select 선택 div 보이기 사라지기
IT창고/HTML 2023. 2. 8. 14:07반응형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(); });
반응형