在掌握了jQ的基础知识之后，我们来看看jQ如何实现下拉框文本内容的转移？
其实，在之前，博主我也写过一篇使用js实现下拉框文本内容的转移的文章，需要比较强的逻辑，jQ就简化了代码书写，便于理解。
写在前面：一定要记得导入js库，建议不要最新的。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wide {
width: 400px;
margin: 0 auto;
}
.selcetwords {
width: 100px;
}
</style>
</head>
<body>
<div class="wide">
<!--<form action="#" method="get" name="myform">-->
<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<button id="rightmove">右移</button>
<button id="leftmove">左移</button>
<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<!--</form>-->
</div>
</body>
<script type="text/javascript">
$().ready(
function(){
$("#rightmove").click(
function(){
$("option:selected").appendTo($("#rightwords"));
}
);
$("#leftmove").click(
function(){
$($("#leftwords")).append($("option:selected"));
}
);
}
);
</script>
</html>
以上代码可以供学习交流直接使用，转载请声明来源地址。
4051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
