动态给select添加项目

8366 · 发表于 2013-2-7 21:17:10

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);
s.options=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);
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" onchange="alert(options[selectedIndex].text);"></</select>
</td>
<td>
<select id="object" style="width: 55" onchange="alert(options[selectedIndex].text);"></</select>
</td>
</tr>
<td><input type="button" value= "dom" ></td> <td><input type="button" value= "object" ></td>
</tr>
</table>
<br>

//这个例子是为了显示如何得到select的选择那个选项(value),和那个选项的值(text)的方法.
<select onchange="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=month--;
var optionM = document.createElement("option");
var textM = document.createTextNode(showmonth);
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 >
<table border="1">
<tr>
<td>
<select name="year" onchange="changeMonth(this)" style="width: 55">
</select>
<select name="month" style="width: 40">
</select>
<input type="button" name="queryByDate"  value="查询"/>
</td>
</tr>
</table>

</body>
</html>

最终效果:

		自动登录	找回密码
密码			立即注册