JS
document.createElement("option")：创建option对象
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>下拉列表添加新选项</title> 10 </head> 11 <body> 12 <script type="text/javascript"> 13 function newOption(){ 14 //获取新增的省份 15 var province=document.getElementById("newPro").value; 16 //获取列表 17 var newOption=document.getElementById("newOption") 18 //在下拉列表中新增 19 /*方法一 20 var option=new Option(province) 21 var nO=newOption.options.add(option) 22 */ 23 //方法二 24 //创建option对象 25 var select=document.createElement("option") 26 //在新增的option中添加值 27 select.innerHTML=province 28 //在新增的option中添加value 29 select.value=province 30 //把option对象添加到下拉列表中 31 newOption.appendChild(select) 32 33 34 } 35 </script> 36 <input type="text" id="newPro"> 37 <input type="button" value="新增" onclick="newOption()"><br> 38 <select id="newOption"> 39 <option value="">请选择省份</option> 40 <option value="河北省">河北省</option> 41 <option value="陕西省">陕西省</option> 42 <option value="湖南省">湖南省</option> 43 <select> 44 45 </body> 46 </html>
jQuery
1 <body> 2 <script type="text/javascript"> 3 $(function(){ 4 //$('#div1').append(' world');//hello world 5 //$('#div1').appendTo('world');//world hello 6 $("#mybtn").click(function(){ 7 //获取text中的值 8 var $mytext=$("#mytext").val(); 9 //去掉空格 10 var mytext=$mytext.trim(); 11 //新增一个option到select中,把text中获取的值放入新增的option中 12 var $newoption=$("#myselect").append("<option value='"+mytext+"'>"+mytext+"</option>"); 13 14 }) 15 }) 16 </script> 17 <div id="div1">hello</div><hr> 18 19 <input type="text" id="mytext"> 20 <input type="button" id="mybtn" value="新增"><br> 21 <select id="myselect"> 22 <option value="">--省份--</option> 23 <option value="河北省">河北省</option> 24 </select> 25 26 27 </body>