[Javascript] select 박스에 이벤트 달기

select 박스의 선택 값에 따라 input 태그의 placeholder 옵션에 값을 조정하고 싶다고 하자.

이 때, select 박스에 change 이벤트를 등록할 수 있다.

현실감 있는 구성을 위해, 아래와 같이 select 박스에 선택할 수 있는 level 값이 나열되어 있고,

선택된 level 값에 따라 input 태그의 placeholder 옵션의 값으로 경험치 범위를 보여주고 싶다고 가정하자.

<div class="box">
  <div class="box-header">
    <h3 class="box-title">Modify Character Exp</h3>
  </div>
  <div class="box-body">
    <table class="table table-condensed">
      <tbody>
        <tr class="row1">
          <th>Level</th>
          <td class="level"><select></select></td>
        </tr>
        <tr class="row2">
          <th>Exp</th>
          <td class="exp"><input type="text"></td>
        </tr>
        <tr class="row3">
          <th style="vertical-align: middle;">Memo</th>
          <td class="memo"><textarea></textarea></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="box-footer">
    <div class="pull-left">
      <button class="modify" onclick="modifyButton(this)">Modify</button>
    </div>
    <div class="pull-right">
      <button class="modifyClose" onclick="cancelButton(this)">Close</button>
    </div>
  </div>
</div>

 

위의 템플릿 코드를 렌더링 시키는 함수를 만들자.

// Ajax를 통해 서버에서 받아온 값을 토대로 템플릿 코드에 데이터를 렌더링한다.
function templateRenderer(retVal) {
    if (true == $.isEmptyObject(retVal.data)) {
        return;
    }
    
    // level은 1 ~ 10까지 있다고하자.
    $(".exp input").attr("placeholder", "0 ~ 9");
    $(".level select").empty();
    for (var i = 1; i <= 10; ++i) {
        $(".level select").append('<option>' + i + '<option>');
    }
}

 

참고로, Javascript에서 false의 의미로 사용되는 값은 총 5가지다.

""    0   NaN   null   undefined 

그래서 객체가 null인지 체크하기 위해선 위의 경우를 다 고려해야한다. 위 코드처럼 jQuery 제공함수를 사용하면 쉽게 체크할 수 있다.

 

마지막으로 select 박스에 change 이벤트 등록하기.

$('table').on("change", ".level select", function() {
    // 각각의 레벨이 가지는 최대 경험치 값들을 정의한다.
    var expForLevel = [
        0, 150, 650, 2350
    ];
    
    var idx = $(this).val();
    $(this).closest('table').find(".exp input").attr("placeholder", expForLevel[idx - 1] + "~" + expForLevel[idx] - 1);
});