JS/jQuery-下拉列表添加新选项

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>