jQueryフォームのSelect
<script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script>
<p>
<select id="select1" multiple style="width:100px;height:160px;">
<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>
<select id="select2" multiple style="width:100px;height:160px;"></select>
</p>
<p><input type="button" value=" " id="add_selected" /> <input type="button" value=" " id="remove_selected" /></p>
<p><input type="button" value=" " id="add_all" /> <input type="button" value=" " id="remove_all" /></p>
<script type="text/javascript">
$(document).ready(function(){
$("#add_selected").bind('click', function(){
$options = $("#select1 option:selected"); //
$options.appendTo('#select2'); //
})
$("#remove_selected").bind('click', function(){
$options = $("#select2 option:selected"); //
$options.appendTo('#select1'); //
})
$("#add_all").bind('click', function(){
$options = $("#select1 option"); //
$options.appendTo('#select2'); //
})
$("#remove_all").bind('click', function(){
$options = $("#select2 option"); //
$options.appendTo('#select1'); //
})
})
</script>
効果図の表示: