<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>
分享到：
相关推荐
9. **浏览器兼容性**：博客中提到的`select_Option(这个支持FF).html`可能是指该示例在Firefox浏览器上已测试通过，但需要注意其他浏览器如IE、Chrome、Safari等的兼容性问题。 通过这些知识点，开发者可以有效地...
JavaScript Option onclick 事件 IE 解决方案及兼容 IE 和 Firefox JavaScript 中的 Option onclick 事件是用户在Select 元素中选择一个选项时触发的事件，但是在 Internet Explorer（IE）浏览器中，该事件无法正确...
需要注意的是，虽然上述代码在IE和Firefox等浏览器中测试成功，但不同的浏览器可能对某些DOM操作有不同的实现。为了确保跨浏览器的兼容性，可以使用DOM操作方法如`document.createElement`、`appendChild`和`...
IE7及更早版本使用`options[index].selected`来判断选项是否被选中，而Firefox通常支持W3C标准，所以它会直接通过`selectElement.selectedIndex`来获取选中的选项索引，然后通过`selectElement.options...
在本篇文章中，我们将介绍如何使用JavaScript来获取HTML中的select元素的当前值，并且确保这段代码兼容主流的浏览器，包括IE、Firefox、Opera和Chrome。在Web开发中，select元素通常用来制作下拉列表，它允许用户从...
今天在Ajax中使用两个下拉框动态添加select中的options,当我在IE测试下正常使用却在FireFox中不能正常使用，我对脚本也不是很熟悉，所以上网查了一下发现他们在动态添加option时有点不同。 下面把他记下来，说不定...
记住，这些操作需要确保浏览器兼容性，因为某些方法在不同浏览器中可能略有不同，如IE和Firefox对`options.add()`的处理。使用DOM操作如`createElement`、`appendChild`和`removeChild`可以提供更标准和兼容的方法，...
在Web开发中，兼容性是一个重要的考虑因素，尤其是对于老版本的Internet Explorer (IE)和Firefox浏览器。由于它们在实现JavaScript和DOM（文档对象模型）时存在差异，编写兼容这两者的脚本是一项挑战。以下是一些...
为了确保兼容性，还可以通过select元素的options属性来添加新的option，这样可以同时兼容IE和Firefox浏览器。 ```javascript function addOption() { var obj = document.getElementById('mySelect'); // 兼容IE...
在实际项目中，为确保在各种浏览器下都能正常工作，推荐进行充分的跨浏览器测试，使用像BrowserStack或Sauce Labs这样的工具，以确保在Chrome、Firefox、Safari、Edge以及Internet Explorer等主流浏览器上的兼容性。...
`add`方法在IE中有效，而在Firefox等其他浏览器中，应使用`options.add`。 10. **删除所有选项、删除单个选项** 可以通过`options.length=0`删除所有选项，或通过`options.remove(index)`删除指定索引的选项。 11...
综上所述，在AjaxControlToolKit环境下，使用JavaScript实现一个兼容IE和Firefox的Dropdownlist，需要理解DOM操作、Ajax通信、事件监听以及跨浏览器的兼容性处理。通过这种方式，我们可以创建一个高效且具有良好用户...
//这个兼容 IE 与 firefox } ``` 删除所有选项 option 如果我们需要删除所有选项 option，可以使用 options.length = 0;办法来清空 select 元素中的所有选项。 ```javascript function removeAll(){ var obj = ...
// 这个方法兼容IE和Firefox } ``` 有时我们可能需要清空select元素中的所有option选项，可以通过设置option集合的length属性为0来实现： ```javascript function removeAll() { var obj = document....
...其中遇到的问题有，兼容ie和firefox的事件，然后是设置select中的中options的selected属性。 兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all;
// 兼容IE和Firefox浏览器 obj.options.add(new Option("文本", "值")); } ``` 在这个函数中，new Option()用于创建一个新的option元素。第一个参数为显示在option中的文本，第二个参数为option的值。 知识点三：...