今天学习了jq,并且进行了一个使用jq实现简单左右移动的案例,具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右移动</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(function () {
//第一个按钮 将第一个元素进行移动
$("#toRight1").click(function () {
$("#left option:first").appendTo("#right");
})
// 第二个按钮 将选中的元素进行移动,可多选
$("#toRight2").click(function () {
$("#left option:selected").appendTo("#right");
})
//第三个按钮,将所有元素进行移动
$("#toRight3").click(function () {
$("#left option").appendTo("#right");
})
$("#toLeft1").click(function () {
$("#right option:first").appendTo("#left");
})
$("#toLeft2").click(function () {
$("#right option:selected").appendTo("#left");
})
$("#toLeft3").click(function () {
$("#right option").appendTo("#left");
})
})
</script>
</head>
//下面为文本框主体部分
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨cuan</option>
<option>甄</option>
<option>槑mei</option>
<option>夔kui</option>
<option>嬲niao</option>
<option>窊wa</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
