JavaScript基础案例(二)
JavaScript简单案例
- 案例一：下拉框内容左右移动
- 案例二：下拉框联动
- 案例三：动态生成表格
案例一：下拉框内容左右移动
思路
- 创建两个div，每个div分别放一个select下拉选择框和两个按钮，对div使用浮动布局实现两个div显示在同一行，设置相应的属性。
<div id="div1">
<select id="select1" multiple="multiple">
<option>猪肉option>
<option>羊肉option>
<option>牛肉option>
<option>鸡肉option>
<option>鸭肉option>
select>
<br />
<input type="button" value="添加到右边" onclick="goRight()"/>
<input type="button" value="全部添加到右边" onclick="goRightAll()"/>
div>
<div id="div2">
<select id="select2" multiple="multiple">
<option>白菜option>
<option>卷心菜option>
<option>生菜option>
select>
<br />
<input type="button" value="添加到左边" onclick="goLeft()"/>
<input type="button" value="全部添加到左边" onclick="goLeftAll()"/>
div>
- (1)将内容添加至右边
i.获取select2
ii.通过getElementsByTagName()方法获取select1中的option标签并返回一个数组。
iii.遍历数组
iv.判断当前option是否被选中，若被选中，则调用appendChild()方法将当前option剪切至另一个下拉框
需注意的问题
当每移动一个option到另一个下拉框，options数组的长度会减1即
第一次:i=1 length = 5
第二次:i=2 length = 4
第三次:i=3 length = 3
故无法将整个数组完整遍历
所以要添加一句i- - ,使变量i一直为0，这样就能实现将整个数组遍历
(2)将全部内容添加至右边
步骤与前面的相似，由于是将全部内容移动，所以无序判断option是否被选中，故将if语句删去即可
(3)将内容添加至左边
思路与添加至右边的相似，不再做陈述。
(4)将全部内容添加至左边
思路与添加至右边的相似，不再做陈述。
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{
width: 120px;
height: 200px;
float: left;
}
select{
width: 100px;
height: 150px;
}
style>
head>
<body>
<div id="div1">
<select id="select1" multiple="multiple">
<option>猪肉option>
<option>羊肉option>
<option>牛肉option>
<option>鸡肉option>
<option>鸭肉option>
select>
<br />
<input type="button" value="添加到右边" onclick="goRight()"/>
<input type="button" value="全部添加到右边" onclick="goRightAll()"/>
div>
<div id="div2">
<select id="select2" multiple="multiple">
<option>白菜option>
<option>卷心菜option>
<option>生菜option>
select>
<br />
<input type="button" value="添加到左边" onclick="goLeft()"/>
<input type="button" value="全部添加到左边" onclick="goLeftAll()"/>
div>
<script type="text/javascript">
//添加到右边
function goRight(){
var sel2 = document.getElementById("select2"); //获取select2
var options = select1.getElementsByTagName("option");//获取select1的option 返回一个数组
for(var i = 0;i < options.length;i++){//遍历数组
if(options[i].selected){//判断是否被选中
sel2.appendChild(options[i]);//将被选中的项剪切到select2
i--;//每执行一次appendChild，options的length都会减一，为了能实现遍历全部元素，需每次i--
}
}
}
//全部添加到右边
function goRightAll(){
var sel2 = document.getElementById("select2");//获取select2
var options = select1.getElementsByTagName("option");//获取select1的option
for(var i = 0;i < options.length;i++){//遍历options数组
sel2.appendChild(options[i]);//将每个option剪切到select2
i--;
}
}
//添加到左边
function goLeft(){
var sel1 = document.getElementById("select1"); //获取select1
var options = select2.getElementsByTagName("option");//获取select2的option 返回一个数组
for(var i = 0;i < options.length;i++){//遍历数组
if(options[i].selected){//判断是否被选中
sel1.appendChild(options[i]);//将被选中的项剪切到select1
i--;
}
}
}
//全部添加到左边
function goLeftAll(){
var sel1 = document.getElementById("select1");//获取select1
var options = select2.getElementsByTagName("option");//获取select2的option
for(var i = 0;i < options.length;i++){//遍历options数组
sel1.appendChild(options[i]);//将每个option剪切到select1
i--;
}
}
script>
body>
html>
案例二：下拉框联动
思路
此案例会用到onchange事件
onchange 事件会在域的内容改变时发生，可用于单选框与复选框改变后触发的事件。
- 创建两个<select>下拉框,下拉框的内容由标签<option>包起来。如：
//this.value表示当前选中的内容。若复选框选中猪肉时，即this.value == 猪肉
<select id="select1" onchange="changeFood(this.value)">
<option>--请选择--option>
<option>猪肉option>
<option>羊肉option>
<option>牛肉option>
<option>鸡肉option>
select>
- 创建一个二维数组arr,数组的每一行的第一个字符串为对应的肉类，以便于后面对所选中的内容进行匹配。如：
var arr = new Array(4);
arr[0] = ["猪肉","红烧肉","回锅肉","梅干菜扣肉","水煮肉片"];
arr[1] = ["羊肉","红烧羊肉","孜然羊肉","干锅羊肉","红焖羊肉"];
- 定义changeFood(obj)方法
(1).遍历arr二维数组
(2).通过if语句判断传进来的形参obj与二维数组中的第一列的某个元素是否匹配。若找到对应的行，则对这一行的数组进行遍历，并通过1、创建<option>标签，使用createElement(“option”)，2、创建文本,使用createTextNode(“文本”)，3、将文本添加到option中，使用appendChild()，4、将option添加到父节点select中实现第二个下拉框的值的改变。
for(var i = 0;i < arr.length;i++){
if(arr[i][0] == obj){//判断选中的obj与二维数组中第一列的元素是否匹配
for(var j = 1;j < arr[i].length;j++){
var option1 = document.createElement("option");//创建option标签
var test = document.createTextNode(arr[i][j]);//创建文本
option1.appendChild(test);//把文本添加进option1里面
var value = document.getElementById("select2");//获取select2标签
value.appendChild(option1);//把option添加进value中
}
}
}
- 注意
当选中猪肉以后，再选中羊肉，第二个下拉框的猪肉菜式并不会自动删除，羊肉的菜式会追加到猪肉菜式的后面。所以要在方法体的一开始，清空第二个下拉框的option
(1).获取下拉框二的每一个option，使用getElementsByTagId（“option”）获取子节点
(2)遍历获取到的options数组，使用removeChild()方法将每个子节点删去。
//1、获取select2里的option
var options = select2.getElementsByTagName("option");
//遍历options
for(var i = 0;i < options.length;i++){
select2.removeChild(options[i]);//通过父结点删除每一个option
i--;
}
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<select id="select1" onchange="changeFood(this.value)">
<option>--请选择--option>
<option>猪肉option>
<option>羊肉option>
<option>牛肉option>
<option>鸡肉option>
select>
<select id="select2">
select>
body>
<script type="text/javascript">
//创建二维数组
var arr = new Array(4);
arr[0] = ["猪肉","红烧肉","回锅肉","梅干菜扣肉","水煮肉片"];
arr[1] = ["羊肉","红烧羊肉","孜然羊肉","干锅羊肉","红焖羊肉"];
arr[2] = ["牛肉","西红柿炖牛肉","水煮牛肉","小炒牛肉","葱爆牛肉","牙签牛肉"];
arr[3] = ["鸡肉","白切鸡","黄焖鸡","咸焗鸡"];
function changeFood(obj){
//清空select2
//1、获取select2里的option
var options = select2.getElementsByTagName("option");
//遍历options
for(var i = 0;i < options.length;i++){
select2.removeChild(options[i]);//通过父结点删除每一个option
i--;
}
//遍历二维数组
for(var i = 0;i < arr.length;i++){
if(arr[i][0] == obj){//判断选中的obj与二维数组中第一列的元素是否匹配
for(var j = 1;j < arr[i].length;j++){
var option1 = document.createElement("option");//创建option标签
var test = document.createTextNode(arr[i][j]);//创建文本
option1.appendChild(test);//把文本添加进option1里面
var value = document.getElementById("select2");//获取select2标签
value.appendChild(option1);//把option添加进value中
}
}
}
}
script>
html>
案例三：动态生成表格
思路
- 创建两个文本框以及一个按钮，按钮需添加一个onclick事件,并添加一个div以用来存放生成的表格
row:<input type="text" id="row" />
col:<input type="text" id="col" />
<br />
<input type="button" value="create" onclick="create()"/>
<div id="nav">div>
- 定义create()方法，实现生成表格的操作
(1).定义一个变量tab用来存储表格的所有标签以及内容。
(2).获取用户输入到文本框的内容。
(3).生成相应的行和列，使用循环实现。
(4).将tab添加到div标签中
create()代码
function create(){
//用一个变量存储table及里面的所有标签内容
var tab = "";
//获取文本框的行和列的值
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
//循环生成行
for(var i = 0;i < row;i++){
tab += "";
//循环生成单元格
for(var j = 0;j < col;j++){
tab += "";
tab += "单元格";
tab += " ";
}
tab += " ";
}
tab += "
";
//将tab添加进div中
//获取div
var nav = document.getElementById("nav");
nav.innerHTML = tab;
}
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
row:<input type="text" id="row" />
col:<input type="text" id="col" />
<br />
<input type="button" value="create" onclick="create()"/>
<div id="nav">div>
body>
<script type="text/javascript">
function create(){
//用一个变量存储table及里面的所有标签内容
var tab = "";
//获取文本框的行和列的值
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
//循环生成行
for(var i = 0;i < row;i++){
tab += "";
//循环生成单元格
for(var j = 0;j < col;j++){
tab += "";
tab += "单元格";
tab += " ";
}
tab += " ";
}
tab += "
";
//将tab添加进div中
//获取div
var nav = document.getElementById("nav");
nav.innerHTML = tab;
}
script>
html>