select动态增加option

最新推荐文章于 2024-06-25 15:10:00 发布

转载最新推荐文章于 2024-06-25 15:10:00 发布 · 222 阅读

文章标签：

#xhtml #javascript #ViewUI

本文展示了一个使用JavaScript动态增加HTML下拉菜单选项的例子。通过点击按钮可以为选择框添加新的选项，并从输入框中获取选项的文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

关注博主即可阅读全文