您的位置：首页 > Web前端 > JavaScript

Javascript之DOM(下拉列表操作)

2014-06-07 20:53 274 查看

下拉列表框select的操作和其他操作有一些区别，选项存放在options集合中，实现联动效果

<html>
<head>
<meta charset="utf-8" />
<title>联动效果</title>
<style type="text/css">
body,table,th,td{font-size:12px;}
#tabScore{ border-collapse: collapse;}
#tabScore th{ padding: 5px;}
#tabScore td{ padding: 5px;}
</style>
<script type= "text/javascript">
function choose(){
var pSel = document.getElementById("province").value;
var city = document.getElementById("city");
//删除下拉列表框中原有的所有选项
city.options.length = 0;
if(pSel == "重庆"){
//创建下拉列表框选项
var cq = new Option("重庆", "重庆");
//将选项添加到下拉框中
city.options.add(cq);
var wz = new Option("万州", "万州");
city.options.add(wz);
var kx = new Option("开县", "开县");
city.options.add(kx);
var hc = new Option("合川", "合川");
city.options.add(hc);
}
else if (pSel == "浙江"){
var hz = new Option("杭州", "杭州");
city.options.add(hz);
var sx = new Option("绍兴", "绍兴");
city.options.add(sx);
var wz = new Option("温州", "温州");
city.options.add(wz);
var tz = new Option("台州", "台州");
city.options.add(tz);
}
}
function addScore() {
//得到输入数据
var name = document.getElementById("userName").value;
var java = document.getElementById("java").value;
var html = document.getElementById("html").value;
var sql = document.getElementById("sql").value;
var count = parseInt(java) + parseInt(html) + parseInt(sql);
//得到表格
var tab = document.getElementById("tabScore");
//创建行
var row = tab.insertRow();
//在行上添加单元格
var td_name = row.insertCell();
td_name.style.textAlign = "center";
td_name.innerText = name;
var td_java = row.insertCell();
td_java.style.textAlign = "center";
td_java.innerText = java;
}
</script>
</head>
<body>
<center>
<select id="province" onChange="choose()">
<option value="重庆">重庆</option>
<option value="浙江">浙江</option>
</select>省（/直辖市）

<select id ="city">
<option value= "重庆">重庆</option>>
<option value= "万州">万州</option>
<option value= "开县">开县</option>
<option value= "合川">合川</option>
</select>
</center>
<center>
姓名：<input type="text" id="userName" size="10"/>
java: <input type="text" id="java" size="3" maxlength="2"/>
</center>
<input type="button" value="添加" onclick="addScore()"/>
<hr size="1" color="red"/>
<table id="tabScore" width="470" border="1" bordercolor="blue" align="center">
<tr bgcolor="red">
<th>姓名</th><th>java</th><th>html</th><th>sql</th><th>总成绩</th>
<tr>
<tr>
<td align="center">张三</td>
<td align="center">85</td>
<td align="center">11</td>
<td align="center">23</td>
<td align="center">44</td>
</tr>
<tr>
<td align="center">李四</td>
</tr>

</body>
</html>

通过设置城市下拉列表框的options集合的长度清空原有选项，通过Option对象创建选项，使用options集合的add方法添加选项到下拉列表框中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航