使用js对select动态添加和删除OPTION示例代码

<select id="ddlResourceType" onchange="getvalue(this)"> </select>
动态删除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option：
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
上面在IE和FireFox都能测试成功，希望以后你可以用上。
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。
取值方面


代码如下:

function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
}

=======================================
1 检测是否有选中


代码如下:

if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}

2 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;
3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;
=======================================


代码如下:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS对select动态添加options操作[IE和FireFox兼容]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["精神提炼","作风设计","目标设置","理念提升"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "2" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画册","宣传光盘","办公用品纪念品"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "3":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["校园景观设计","校园雕塑设计","校园浮雕设计","走廊文化设计"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "4":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["学校制度","文化活动","行为规范"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
default :
document.getElementById("lb").options.length=0;
var oOption = document.createElement("OPTION");
oOption.value=0;
oOption.text="请选择作品类别";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 动态删除select中的所有options： <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
动态删除select中的某一项option： <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 动态添加select中的项option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能测试成功，希望以后你可以用上。 <br />
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。 </p>
<p>取值方面<br />
function getvalue(obj)<br />
{<br />
var m=obj.options[obj.selectedIndex].value<br />
alert(m);//获取value<br />
var n=obj.options[obj.selectedIndex].text<br />
alert(n);//获取文本<br />
}<br />
</p>
<p>例子：</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
<tr>
<td width="50%" height="41" ><div align="center">
<select name="xt" id="xt" onchange="xlbchange(this.value)">
<option selected="selected">请选择作品系统</option>
<option value="1">理念视别系统</option>
<option value="2">视觉识别系统</option>
<option value="3">环境视别系统</option>
<option value="4">行为视别系统</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">请选择作品类别</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>

赞 (0)

相关推荐

  • 获取select元素被选中的文本内容的js代码

    复制代码 代码如下: var sel=document.getElementById(id);//select元素的id var index=sel.selectedIndex;//获取被选中的option的索引 var textsel= sel.options[index].text;//获取相应的option的内容

  • JS对HTML标签select的获取、添加、删除操作

    复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum

  • JavaScript实现将数组数据添加到Select下拉框的方法

    JavaScript实现将数组数据添加到Select下拉框的方法

    本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

  • JavaScript Select和Option列表元素上下左右移动

    JavaScript Select和Option列表元素上下左右移动

    作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • JavaScript实现向select下拉框中添加和删除元素的方法

    JavaScript实现向select下拉框中添加和删除元素的方法

    本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • extjs 列表框(multiselect)的动态添加列表项的方法

    因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法. 在方

  • js 获取当前select元素值的代码

    1.如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个. 2.可以通过 select.selectedIndex 获取到选中的 option 元素的索引. 3.可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素. 4.option 元素 <option selected="selected" value="value3">text3&l

  • JS动态添加与删除select中的Option对象(示例代码)

    如下所示: 复制代码 代码如下: //动态删除select中的所有options:   function delAllOptions(){        document.getElementById("user_dm").options.length=0;   } //动态删除select中的某一项option:    function delOneOption(index){        document.getElementById("user_dm").o

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

  • js获取当前select 元素值的代码

    如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个. 可以通过 select.selectedIndex 获取到选中的 option 元素的索引. 可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素. option 元素 <option selected="selected" value="value3">text3</optio

  • javascript操作select元素实例分析

    本文实例讲述了javascript操作select元素的用法.分享给大家供大家参考.具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们. 当按下submit时关闭窗口本身,代码如下: <!DOCTYPE html> <html> <head> <title>duang for se

  • js querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5

随机推荐