web开发中,经常需要给select动态添加数据,常用的方法有几种:
1.基于dom方式的添加
2.使用innerHTML添加
3.object方式添加
案例:页面上有一个select标签,他的option是空的,还有一个按钮,现在点击按钮,动态给select标签添加option选项(选项的值我们可以通过一个数组来模拟)
<html>
<head>
<script type="text/javascript">
var city = new Array();
city[0 ]= "西安" ;
city[1 ]= "乌鲁木齐" ;
city[2 ]= "西宁" ;
city[3 ]= "北京" ;
//使用object方式
function objectF()
{
var s = document.getElementById("object");
for(var i=0;i<city.length;i++)
{
var option = new Option(city[i],i);
s.options[i]=option;
}
}
//使用dom方式
function domF()
{
var s = document.getElementById("dom" );
removeOptions(s);
for (var i= 0 ;i<city.length;i++)
{
var option = document.createElement("option" );
var text = document.createTextNode(city[i]);
option.appendChild(text);
option.value=i;
s.appendChild(option);
}
}
//添加选项前先移出以前的选项,这样做的目的是为了防止用户反复添加(原因是使用了createElement属性)
function removeOptions(selectObj)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById("dom");
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
//移除当前选项
selectObj.options[0] = null;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="dom" style="width: 55" οnchange="alert(options[selectedIndex].text);"></</select>
</td>
<td>
<select id="object" style="width: 55" οnchange="alert(options[selectedIndex].text);"></</select>
</td>
</tr>
<td><input type="button" value= "dom" οnclick="domF()"></td> <td><input type="button" value= "object" οnclick="objectF()"></td>
</tr>
</table>
<br>
//这个例子是为了显示如何得到select的 选择那个选项(value),和那个选项的值(text)的方法.
<select οnchange="alert(this.options[this.selectedIndex].value)"> //this可以写,也可以不写,在这里指这个对象
<option value="ww">我在说- 博客</option>
<option value="ff" selected>博客 - 我在说</option>
</select>
</body>
</html>
显示效果:
使用innerHTML的方式没有测试成功,主要是应为在拿到select对象后,不能使用innerHTML方法在添加"select"字符串,如果这样做会报错.谁又好的方法发上来看看
案例2: 在cuv(统一客户视图) 项目中使用到的 :有两个select标签,一个是年,一个是月,初时化是根据当前时间来显示年月,当用户点击某年时候,动态显示月份,这里我们要用到DOM知识,初始化的时候只有两年,一个是系统当年的年份,一个是系统当前的年份-1)
先看看效果:
思路:当选择某年的时候,如果是当前年,则在月份中显示1月到当前月,如果是去年,则显示1月到12月,主要是给第一个selcet标签写一个onchenge()事件,每次先清空第二个select标签,根据第一个标签的value值来确定第二个标签所显示的月份,用到一个清空select标签的option选项的函数removeOptions()
test.html的代码如下:
<html>
<head>
<title>测试页面</title>
</head>
<script type="text/javascript">
//初始化函数
function init()
{
var localetime=new Date();
var year=localetime.getYear();
var yearTemp=year;
var month=localetime.getMonth()+1;
alert(month);
var length=month;
var showmonth=new Array();
var s = document.getElementById("month");
var lengthTag=s.length;
//显示当前年有几个月份,作为option选项添加在月份select标签下
for (var i=0;i<length;i++)
{
showmonth[i]=month--;
var optionM = document.createElement("option");
var textM = document.createTextNode(showmonth[i]);
optionM.appendChild(textM);
s.appendChild(optionM);
}
//给年select标签下添加option选项
var s1 = document.getElementById("year" );
for(var j=0;j<2;j++)
{
var optionY=document.createElement("option");
var textY = document.createTextNode(year--);
optionY.appendChild(textY);
optionY.value=j+1;
s1.appendChild(optionY);
}
}
function changeMonth(sel)
{
var localetime=new Date();
var year=localetime.getYear();
var yearTemp=year;
var month=localetime.getMonth()+1;
var length=month;
var showmonth=new Array();
if(sel.options[sel.selectedIndex].value==2)
{
var optionM=sel.nextSibling.nextSibling;
removeOptions(optionM);
var monthvalue=12;
for(var n=0;n<12;n++)
{
var optionMonth = document.createElement("option");
var textM = document.createTextNode(monthvalue--);
optionMonth.appendChild(textM);
optionM.appendChild(optionMonth);
}
}
else if(sel.options[sel.selectedIndex].value==1)
{
var optionM2=sel.nextSibling.nextSibling;
removeOptions(optionM2);
var monthvalue2=month;
for(var p=0;p<month;p++)
{
var optionMonth2 = document.createElement("option");
var textM2 = document.createTextNode(monthvalue2--);
optionMonth2.appendChild(textM2);
optionM2.appendChild(optionMonth2);
}
}
}
//移出月的option选项
function removeOptions(selectObj)
{
//原有选项计数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 移除当前选项
selectObj.options[0] = null;
}
}
//当点击查询按钮,显示年,在显示月,在显示月和年组成的字符串,月为1为数字的时候还用加 "0" 凑成两位
function query(btn)
{
// 这里用到DOM,yearObj 是相对于btn的父节点的第一个孩子节点
var yearObj = btn.parentNode.firstChild;
var year=yearObj.options[yearObj.selectedIndex].text;
alert(year);
//monthObj 节点是yearObj节点的第2个兄弟节点,因为两个select标签中间又换行,可以看下两个select标签的书写代码,如果没有换行,则可以只用一个nextSibling,这里特别要注意到换行,空格也是一个节点,只不过它是空的节点
var monthObj = yearObj.nextSibling.nextSibling;
var month = monthObj.options[monthObj.selectedIndex].text;
alert(month);
if(month.length==1)
{
month=0+month;
}
var date=year+month;
alert(date);
}
</script>
<body οnlοad="init()">
<table border="1">
<tr>
<td>
<select name="year" οnchange="changeMonth(this)" style="width: 55">
</select>
<select name="month" style="width: 40">
</select>
<input type="button" name="queryByDate" οnclick="query(this)" value="查 询"/>
</td>
</tr>
</table>
</body>
</html>
最终效果: