一、左右互换
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"><!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<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"));
</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>
<!-- 城市 -->
<!-- this当前对象:select--->
<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>
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"><!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<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"));
});
</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>
<!-- 城市 -->
<!-- this当前对象:select--->
<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>