セレクトボックスの要素を上げ下げ

概要

マルチプルなセレクトボックスの要素を上げたり下げたりする

ソース

HTML

test015.htm

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test015.js">
<title>セレクトボックスの要素を上げ下げ</title>
</head>
<body>
<h1>セレクトボックスの要素を上げ下げ</h1>
<hr>
<select id="test_list" name="test_list" size="8" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="button" value="up" id="up">
<input type="button" value="down" id="down">
</body>
</html>

javascript

test015.js

$(function(){
  $('#test_list').on('change',function(){
    $('#up').prop('disabled',$(this).find('option:selected').length==0 ||
      $(this).find('option:first').prop('selected'));
    $('#down').prop('disabled',$(this).find('option:selected').length==0 ||
      $(this).find('option:last').prop('selected'));
    if($(this).find('option:selected').length>=2){
      for(var i=$(this).find('option:selected:first').index()+1;i<$(this).find('option:selected:last').index();i++){
        $(this).find('option').eq(i).prop('selected',true);
      }
    }
  }).trigger('change');
  $('#up').on('click',function(){
    $('#test_list option:selected:last').after($('#test_list option').eq($('#test_list option:selected:first').index()-1));
    $('#test_list').trigger('change');
  });
  $('#down').on('click',function(){
    $('#test_list option:selected:first').before($('#test_list option').eq($('#test_list option:selected:last').index()+1));
    $('#test_list').trigger('change');
  });
});

[test015] セレクトボックスの要素を上げ下げ

セレクトボックスの要素を上げ下げ

概要

ソース

HTML

javascript

その他

元ネタ

動くサンプル