手动在页面添加值到下拉列表而不刷新的demo

最新推荐文章于 2021-08-05 12:34:11 发布

lihua2915

最新推荐文章于 2021-08-05 12:34:11 发布

阅读量158

点赞数

分类专栏： html脚本文章标签： HTML

本文链接：https://blog.csdn.net/lihua2915/article/details/83486645

版权

html脚本专栏收录该内容

30 篇文章 0 订阅

订阅专栏

手动在页面添加值到下拉列表而不刷新的demo

在一个页面中有一个"添加"按钮和一个下拉列表，在单击"添加"按钮后,便在下拉列表中增加相应的选项,不用刷新页面就能看到列表的更新情况

Html代码

<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);    
}    

</script>    
</head>    
<body>    

<hr>    
<form name = "myForm">    
<select name = "mySelect">    
<option value = "第一名" Selected>中国</option>    
<option value = "第二名">日本</option>    
<option value = "第三名">美国</option>    
<option value = "第四名">英国</option>  
</select>    
<br>  

选项名称 : <input type = "text" name = "myOptionName" value = "英国"><br>    
选项的值 : <input type = "text" name = "myOptionvalue" value = "第四名">    
<input type = "button" onclick = "addOption(-1)" value = "添加">    

</form>    
</body>    
</html>