您的位置：首页 > 运维架构

select动态增加option

2016-11-02 14:21 274 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>option creation</title>

<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">

/*<![CDATA[*/
body {
background-color: #ddd;
}

#container {
width: 400px;
text-align: center;
padding: 20px 0px;
border: 3px double #000;
background-color: #ccc;
margin: 30px auto;
}

/*//]]>*/
</style>

<script type="text/javascript">

//<![CDATA[

var opts=3  /*number of original options*/

var df=document.forms;

function optionAdd(num) {

opts=opts+num;

df[0][0].options.length=opts;

df[0][0].options[opts-1].innerHTML=df[0][1].value;

df[0][1].value=""

}

//]]>

</script>

</head>

<body>

<form action="#">

<div id="container">

<select>

<option>- - - - - - - -</option>

<option>option one</option>

<option>option two</option>

</select> <input type="text" /> <input type="button" value="new option"
onclick="optionAdd(1)" />

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航