JQuery实现添加到选框

先上一张效果图：

开始我们的小项目：

1.先布局好界面：

<div>    <div id = "leftdiv" align="center" style="width: 200px;height: 400px;position: absolute;margin-left: 200px;margin-top: 75px;">        <div id = "middlediv" align="center" style="width: 200px;height: 400px;margin-left: 500px;position: absolute;margin-top: 75px;">        <div id = "rightdiv" align="center" style="width: 200px;height: 400px;margin-left: 800px;position: absolute;margin-top: 75px;"></div>

这时候在界面上什么都看不到，添加如下代码：

在第一个内层div中添加：

<select id = "leftselect"></select>

在第二个内层div中添加：

<button id = "button1"></button><br><button id = "button2"></button><br><button id = "button3"></button><br><button id = "button4"></button>

在第三个内层div中添加：

<select id = "rightselect"></select>

2.我们既然是JQuery，那么，这些select和button的样式，事件什么的就都在JQuery中写了:

先添加JQuery的库：

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

注意一点，src的字符串写法：../表示退出当前文件夹，因为我的html文件在HTML文件夹中，而JQuer库在js文件夹中，所以需要使用../来退出HTML文件夹

使用js/进入js文件夹

使用jquery.js找到我们的名字为jquery.js的JQuery库

切记在导入外部库的<script>标签中不能写入自己的内部js代码

3.写JQuery：

$(document).ready(function() {});

固定写法，表示当document文档流在网页上显示完毕后，进入准备状态时，编译，执行这里的代码

继续写其他的JQuery代码：

var $select = $("#leftselect");//通过JQuery的id选择器得到左面的select的JQuery对象var $select1 = $("#rightselect");//得到右面的select的JQuery对象 $select.attr("multiple","multiple"); //使用attr();函数设置select的风格，multiple表示不是下拉风格，是选择列表风格 $select.width("190px"); //通过width()函数设置select的宽度 $select.attr("size","8"); //设置select的界面中最大可以同时显示8个项 $select.css("border","5px solid red"); //设置select的css样式：边框线：5px 粗，实线 红色 $select.css("backgroundColor","#FFFFFF"); //设置select的背景色为白色：RGB格式，#FFFFFF为2+2+2看，红色+绿色+蓝色 $select.css("color","#000000"); //设置select的颜色为黑色 $select.css("font-size","25px"); //设置select中的字体大小为25px $select.css("font-family","楷体"); //设置select中的字体为楷体 $select.height("248px"); //设置select的高度为248px

在select中添加项：

for(var i = 0;i<15;i++){var $option = $("<option></option>");//创建option标签$option.attr("id","option"+(i+1));//设置id为option(i+1)$option.css("backgroundColor","#FFFFFF");//设置背景色为白色$option.css("color","#000000");//设置字体颜色为黑色$option.css("font-size","25px");//设置字体大小为25px$option.css("font-family","楷体");//设置字体为楷体$option.text("选项"+(i+1));//设置文本为选项(i+1)$option.appendTo($select);//将option挂到select下}

设置右面的select：

$select1.attr("multiple","multiple");$select1.width("190px");$select1.attr("size","8");$select1.css("border","5px solid red");$select1.css("backgroundColor","#FFFFFF");$select1.css("color","#000000");$select1.css("font-size","25px");$select1.css("font-family","楷体");$select1.height($select.height());

效果如下：

设置中间的button：

for(var i = 0;i<4;i++){var $temp = $("#button"+(i+1));$temp.css("backgroundColor","#00FF00");$temp.css("font-family","Times New Roman");$temp.css("font-size","25px");$temp.css("marginTop",height+"px");$temp.width("35px");switch(i){case 0:$temp.text(">");$temp.click(function() {$("#leftselect :selected").appendTo($select1);//使用id选择器和属性选择器联合找到选中的选项，并加入到右面的select中}); break;case 1:$temp.text("<");$temp.click(function() {$("#rightselect :selected").appendTo($select);}); break;case 2:$temp.text(">>");$temp.click(function() {$("#leftselect > option").appendTo($select1); //使用id选择器和子项选择器找到左面select中的所有项，并加入到右面的select中}); break;case 3:$temp.text("<<");$temp.click(function() {$("#rightselect > option").appendTo($select); }); break;}}

效果如下：

至此，这个小项目就完成了！