jquery的方式完成下拉表框的左右选择,这是网站制作的基本操作

编程代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script>

$(function(){

//移一个

$("#one").click(function(){

$("#selone option:selected").appendTo($("#seltwo"));

});

//移全部

$("#all").click(function(){

alert("111");

$("#selone option").appendTo($("#seltwo"));

});

//双击移动

$("#selone").dblclick(function(){

$("#selone option:selected").appendTo($("#seltwo"));

});

});

</script>

</head>

<body>

<input type="button" value="移一个" id="one" />

<input type="button" value="移全部" id="all"/>

<select multiple="multiple" id="selone">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

<select multiple="multiple" id="seltwo">

<option>4</option>

<option>5</option>

<option>6</option>

</select>

</body>

</html>

jquery的方式完成下拉表框的左右选择,这是网站制作的基本操作

jquery的方式完成下拉表框的左右选择,这是网站制作的基本操作

代码效果为

jquery的方式完成下拉表框的左右选择,这是网站制作的基本操作

这个代码有三个功能,分别是选中哪个然后点击移一个,或者是移动全部,还有一个功能是双击点击移动到右边的下拉表框,下拉表框的属性multiple的效果就是显示多个这样拉下来,而不是只有一个一个的拉,没有必要用滚动条了。

每天分享编程知识,欢迎关注

相关推荐