[jquery] 셀렉트박스 선택시 다른 셀렉트박스 설정옵션

selectbox 옵션 선택시, 2차 selectbox가 옵션에 따라 다르게 보여야 할 때 사용하는 스크립트.

HTML

<div>
  <select name="search_game">
    <option value="" selected disabled>게임값</option>
    <option value="updown">▲ / ▼</option>
    <option value="oddeven">홀짝</option>
    <option value="lotto">로또</option>
  </select>
</div>

<div>
  <select name="none">
    <option value="" selected disabled>상태값</option>
  </select>
  <select name="updown" style="display: none">
    <option value="">▲</option>
    <option value="">▼</option>
    <option value="">=</option>
  </select>
  <select name="oddeven" style="display: none">
    <option value="">홀</option>
    <option value="">짝</option>
    <option value="">홀홀</option>
    <option value="">홀짝</option>
    <option value="">짝홀</option>
    <option value="">짝짝</option>
  </select>
  <select name="lotto" style="display: none">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
  </select>
</div>

 

jQuery

// search form selectbox
$('select[name=search_game]').change(function(){
  var $this = $(this).val();
  $(this).closest('.form-row').find('select[name=' + $this +']').siblings().hide(); // 보여야 할 select박스를 제외한 select를 가림
  $(this).closest('.form-row').find('select[name=' + $this +']').show();
});