첫페이지 > Tip&Tech > [js]셀렉트박스의 옵션 이동

[js]셀렉트박스의 옵션 이동

2006/11/24

셀렉트박스의 옵션들을 옮기는 함수입니다. ^^
당연히 자작입니다. -_-)v

# 스크립트 :

  1  function menuMove(id,mode) {
  2    // mode can be 'first', 'last', 'up', 'down'
  3    var obj = document.getElementById(id);
  4    var idx = obj.selectedIndex;
  5    if (idx < 0) idx = obj.selectedIndex = 0;
  6    var opt = obj.options[obj.selectedIndex];
  7    switch (mode) {
  8      case 'first':
  9        obj.insertBefore(opt, obj.options[0]);
 10        break;
 11      case 'last':
 12        obj.appendChild(opt);
 13        break;
 14      case 'up':
 15        if (idx > 0) obj.insertBefore(opt, obj.options[idx-1]);
 16        break;
 17      case 'down':
 18        if (idx < obj.options.length-1) obj.insertBefore(obj.options[idx+1], opt);
 19        break;
 20    }
 21  }

# 예제:

  1  <select id="s" size="8">
  2    <option value="1 번 메뉴 입니다">1 번 메뉴 입니다</option>
  3    <option value="2 번 메뉴 입니다">2 번 메뉴 입니다</option>
  4    <option value="3 번 메뉴 입니다">3 번 메뉴 입니다</option>
  5    <option value="4 번 메뉴 입니다">4 번 메뉴 입니다</option>
  6    <option value="5 번 메뉴 입니다">5 번 메뉴 입니다</option>
  7    <option value="6 번 메뉴 입니다">6 번 메뉴 입니다</option>
  8  </select>
  9  <div>
 10    <a href="javascript:menuMove('s','first')"  >처음</a> |
 11    <a href="javascript:menuMove('s','up')"  >위로</a> |
 12    <a href="javascript:menuMove('s','down')"  >아래로</a> |
 13    <a href="javascript:menuMove('s','last')"  >마지막</a>
 14  </div>

Tip&Tech , ,

댓글이 닫혀 있습니다.