首页 > 其他 > 详细

select动态增加option

时间:2015-05-21 01:12:36      阅读:155      评论:0      收藏:0      [点我收藏+]

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

     

 }

#container {

     width:400px;

     text-align:center;

     padding: 20px 0px;

     border: 3px double #000;

     

     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>

 

select动态增加option

原文:http://www.cnblogs.com/toSeeMyDream/p/4518573.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!