select 선택 div 보이기 사라지기

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();
});