您的位置：首页 > 理论基础 > 计算机网络

S动态添加与删除select中的Option对象 2009年09月23日 15:26 <html> <head> <meta http-equiv="Content-Type" content="t

2011-11-06 16:59 796 查看
S动态添加与删除select中的Option对象
2009年09月23日 15:26

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>JS动态添加删除option</title>

<script>

//动态删除select中的所有options：

function delAllOptions(){

document.getElementById("user_dm").options.length=0;

}

//动态删除select中的某一项option：

function delOneOption(indx){

document.getElementById("user_dm").options.remove(indx);

}

// 动态添加select中的项option:

function addOneOption(){

//document.getElementById("user_dm").options.add(new Option(2,"mytest"));

var selectObj=document.getElementById("user_dm");

alert(selectObj.length);

selectObj.options[selectObj.length] = new Option("mytest", "2");

}

</script>

</head>

<body>

<select id="user_dm" name="user_dm">

<option value="0" selecte>==请选择人员==</option>

<option value="1">test</option>

</select><br>

<input type="button" onClick="addOneOption()" value="添加">

<input type="button" onClick="delOneOption(1)" value="删除第一个">

<input type="button" onClick="delAllOptions()" value="清空">

</body>

</html>

/article/5574332.html

========================================================

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>Js动态添加与删除Option对象</TITLE>

<script language="JavaScript">

// 添加选项

function addOption(pos){

var objSelect=document.getElementById("mySelect");

// 取得字段值

//var strName = document.myForm.myOptionName.value;

// var strValue = document.myForm.myOptionValue.value;

// 建立Option对象

var objOption = new Option("aaaaaaaa","bbbbbbbbb");

if (pos == -1 & pos > objSelect.options.length)

objSelect.options[objSelect.options.length] = objOption;

else

objSelect.add(objOption, pos);

}

// 删除

function deleteOption(type){

var objSelect=document.getElementById("mySelect");

if (type == true)

objSelect.options[objSelect.selectedIndex] = null;

else

objSelect.remove(objSelect.selectedIndex);

}

// 显示选项信息

function showOption(){

var objSelect=document.getElementById("mySelect");

var name = objSelect.options[objSelect.selectedIndex].text;

var value = objSelect.options[objSelect.selectedIndex].value;

alert(name + " = " + value);

}

//动态删除select中的所有options：

function clearAllOptions(){

var objSelect=document.getElementById("mySelect");

objSelect.options.length=0;

}

</script>

</HEAD>

<BODY>

<h2>Js动态添加与删除Option对象</h2>

<hr>

<select id="mySelect" name="mySelect">

<option value="中国" Selected>中国</option>

<option value="日本">日本</option>

<option value="美国">美国</option>

</select>

<input type="button" onclick="showOption(this.form)" value="显示">

<input type="button" onclick="deleteOption(true)" value="删除">

<input type="button" onclick="deleteOption(false)" value="Remove方法"><br><br>

选项名称 : <input type="text" name="myOptionName" value="英国"><br>

选项的值 : <input type="text" name="myOptionValue" value="value4">

<input type="button" onclick="addOption(-1)" value="添加">

<input type="button" onclick="addOption(0)" value="插入到最前面">

<input type="button" onclick="clearAllOptions()" value="清空">

</BODY>

</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航