标签：idt content name input flex next play cte tip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select {
width: 100px;
height: 150px;
}
form {
display: flex;
}
div {
width: 40px;
}
</style>
</head>
<body>
<form action="#" method="get">
<select name="" id="name" multiple>
<option value="zgl">诸葛亮</option>
<option value="zf">张飞</option>
<option value="gy">关羽</option>
<option value="xc">许褚</option>
<option value="lb">刘备</option>
<option value="cc">曹操</option>
</select>
<div>
<input type="button" value=">">
<input type="button" value=">>">
<input type="button" value="<">
<input type="button" value="<<">
</div>
<select name="" id="changeName" multiple>
</select>
<div>
<input type="button" value="↑">
<input type="button" value="↓">
</div>
</form>
<script src="./jquery-1.12.4.min.js"></script>
<script>
window.onload = function name(params) {
//向右移动选中的项
$("input[value=‘>‘]").click(function () {
$("select option:selected").appendTo("#changeName");
})
//向右移动所有项
$("input[value=‘>>‘]").click(function () {
$("select option").appendTo("#changeName");
})
//向左移动选中的项
$("input[value=‘<‘]").click(function () { $("#changeName>option:selected").appendTo("#name"); })
//向左移动所有项 $("input[value=‘<<‘]").click(function () { $("#changeName option").appendTo("#name"); })
//上移 $("input[value = ‘↑‘]").click(function () { $("#changeName option:selected:first").prev().before($("#changeName option:selected")) $("#name option:selected:first").prev().before($("#name option:selected")) })
//下移 $("input[value = ‘↓‘]").click(function () { $("#name option:selected:last").next().after($("#name option:selected")) $("#changeName option:selected:last").next().after($("#changeName option:selected")) }) } </script> </body> </html>
标签：idt content name input flex next play cte tip
原文地址：https://www.cnblogs.com/cj-18/p/9206871.html
