动态给select添加项目

最新推荐文章于 2025-10-28 11:51:38 发布

最新推荐文章于 2025-10-28 11:51:38 发布 · 942 阅读

文章标签：

#JavaScript #J# #HTML #ViewUI

javaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍在Web开发中如何使用JavaScript动态地为HTML的Select元素添加选项。提供了两种常见方法：一是使用DOM操作创建并添加Option元素；二是通过Object方式设置Select的options属性。此外，还演示了一个实际应用案例，展示如何根据用户选择的不同年份动态更新月份选项。

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" 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" onclick="domF()"></td> <td><input type="button" value= "object" onclick="objectF()"></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>

</head>

//初始化函数

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>

<tr>

<td>

</select>

</select>

</td>

</tr>

</table>

</body>

</html>

最终效果: