JQuery左右互换【七】

最新推荐文章于 2022-01-06 15:03:44 发布

Joss_dzy

最新推荐文章于 2022-01-06 15:03:44 发布

阅读量759

点赞数

分类专栏：前端 Jquery 文章标签： JQuery

本文链接：https://blog.csdn.net/Joss_dzy/article/details/80564956

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Jquery

4 篇文章 0 订阅

订阅专栏

一、左右互换
1. 页面介绍：
1) 表格只有一行，这一行有三列
2) 第一列td中有一个可以多选的select对象，id是first，大小是10
3) 第二列td有四个按钮，id分别是：add、add_all、remove、remove_all
4) 第三列td中有一个可以多选的select对象，id是second，大小是10

2. 实现原理：
1) 添加的实现：使用选择器，把左边选中的option，添加到右边的select的元素中。
2) 添加所有的实现：使用选择器，把左边所有的option，添加到右边的selected的元素中
3) 使用append()或appendTo()都可以，只是主操作对象不同。
4) append()方法本身是剪切，会删除原有的元素。如果要进行复制操作，则append(元素.clone());

3. 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title>左右互换</title>
<style type="text/css">
body {
font-family: Courier;
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}

td {
font-size: 12px;
}

.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}

.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}

.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}

.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}

.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}

.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}

.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}

.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}

.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}

.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}

.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}

.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}

.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}

.tablebg {
font-size: 12px;
}

.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
width: 160px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}

.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}

.noborder {
border: none;
}

.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: Courier;
}

.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
</style>
</head>

<body>
<div style="border:1px dashed #E6E6E6;margin:30px auto; width:420px; height:200px; background-color:#E6E6E6;">
<table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select></td>
<td width="89" valign="middle" align="center">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select></td>
</tr>
</table>
</div>
</body>

<script type="text/javascript">
//添加
$("#add").click(function(){
//父元素添加子元素
//$("#second").append($("#first option:selected"));
//子元素添加到父元素中
$("#first option:selected").appendTo($("#second"));
});

//添加全部
$("#add_all").click(function(){
$("#second").append($("#first option"));

});

//移出
$("#remove").click(function(){
//父元素添加子元素
// $("#second").append($("#first option:selected"));
//子元素添加到父元素中
$("#second option:selected").appendTo($("#first"));
});

//全部移出
$("#remove_all").click(function(){
$("#first").append($("#second option"));
});

</script>
</html>

二、省市级联
1. 开发步骤：
1) 定义一个二维数组，保存各个城市的数据。
2) 编写城市下拉框的改变事件。先得到当前选中的城市值，把城市的值做为数组的下标。
3) 添加数组中的数据到区域的下拉框中，添加之前先清空原有的数组，但要保留第一行。
4) 使用each()函数对数组进行遍历，添加元素到区域下拉框中

2. 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//准备城市的二维数组
var areas =
[
["海淀区","昌平区","朝阳区"], //北京
["南开区","和平区","西青区"], //天津
["浦东区","浦西区","闵行区"], //上海
["天河区","番禺区","海珠区"] //广州
];

$(function(){
//使用change事件
$("#city").change(function(){
//得到值
var index = $(this).val();
//得到数组
var arr = areas[index];
/*
//清空所有的子元素
$("#area").empty();
//添加第一行
$("#area").append($("<option>--请选择区域--</option>"));
*/
//除了第一行之外的option全部清空
$("#area option:not(:first)").remove();
//转成jq对象，调用each方法，循环数组
$(arr).each(function(index, element){
//得到area下拉列表
$("#area").append($("<option>" + element + "</option>"));
});
});
});
</script>

</head>
<body>


<select id="city" name="city">
<option value="">--请选择城市--</option>
<option value="0">北京市</option>
<option value="1">天津市</option>
<option value="2">上海市</option>
<option value="3">广州市</option>
</select>

<select id="area" name="area">
<option>--请选择区域--</option>
</select>
</body>
</html>

Joss_dzy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery左右互换【七】

一、左右互换 1. 页面介绍： 1) 表格只有一行，这一行有三列 2) 第一列td中有一个可以多选的select对象，id是first，大小是10 3) 第二列td有四个按钮，id分别是：add、add_all、remove、remove_all 4) 第三列td中有一个可以多选的select对象，id是second，大小是10 2. 实现原理： 1) 添加的实现：使用选择器，把左边选中...
复制链接

扫一扫

专栏目录