添加与删除Option对象

by 清泉 17. 十月 2008 11:21
这里是一个简单的添加与删除Option对象的使用范例

下面是页面截图:


下面是源文件内容:
<html>
<head>
<title>添加与删除Option对象</title>
<script language="JavaScript">
// 添加选项
function addOption(pos){
    var objSelect = document.myForm.mySelect;
    // 取得字段值
    var strName = document.myForm.myOptionName.value;
    var strValue = document.myForm.myOptionValue.value;
    // 建立Option对象
    var objOption = new Option(strName,strValue);
    if (pos == -1 & pos > objSelect.options.length)
       objSelect.options[objSelect.options.length] = objOption;
    else
       objSelect.add(objOption, pos);
}
// 删除选项
function deleteOption(type){
    var objSelect = document.myForm.mySelect;
    if (type == true)
       objSelect.options[objSelect.selectedIndex] = null;
    else
       objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(objForm){
    var objSelect = objForm.mySelect;
    var name = objSelect.options[objSelect.selectedIndex].text;
    var value = objSelect.options[objSelect.selectedIndex].value;
    alert(name + " = " + value);
}
</script>
</head>
<body>
<h2>添加与删除Option对象</h2>
<hr>
<form name="myForm">
<select 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="插入">
</form>
</body>
</html>

Tags: , ,

JS相关技术

添加评论



(将显示你的Gravatar头像)  

biuquote
微笑得意调皮害羞酷大笑惊讶发呆喜欢可怜尴尬闭嘴噘嘴皱眉伤心抓狂呕吐坏笑漫骂发怒
Loading



Supidea.com 晨飞的梦 @ All Rights Reserved. Powered by BlogYi.NET ver:1.8.0.0. 苏ICP备09011404号

关于博主

kamau
抱着美好的理想背井离乡,这酸甜苦辣只能默默忍受。既然选择了路,就得风雨兼程……

Calendar

<<  五月 2012  >>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

在日历中查看文章

最近的评论

Comment RSS

声明

      本博所发一切破解相关附件只作学习研究交流之用,严禁用于商业用途,请在下载24小时内删除。
      本博所有网友评论不代表本博立场,版权归其作者所有。

© Copyright 2009