listBox選択
2196 ワード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
<style type="text/css">
select{width: 150px;height: 180px;}
</style>
</head>
<body>
<div>
<div>
<select multiple="multiple" name="select1" id="select1">
<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>
</select>
<div style="display:inline">
<button id="reset">REST</button>
<button id="btn1">>></button>
<button id="btn2"><<</button>
</div>
<select multiple="multiple" name="select2" id="select2">
</select>
</div>
</div>
</body>
<script type="text/javascript">
var $s1 = $('#select1'),
s1h = $s1.html(),
$s2 = $('#select2'),
s2h = $s2.html();
$('#btn1').on('click', function (e) {
$s1.find('option:selected').appendTo($s2);
});
$('#btn2').on('click', function (e) {
$s2.find('option:selected').appendTo($s1);
});
$('#reset').on('click', function(e) {
debugger;
$s1.empty().append(s1h);
$s2.empty().append(s2h);
});
</script>
</html>