1 <!doctype html> 2 <html> 3 <head> 4 <!--声明当前页面编码集（中文编码《gbk,gb2312》,国际编码《utf-8》）--> 5 <meta http-equiv="Content-Type" content="text/html";charset="utf-8"> 6 7 <title>HTML模版</title> 8 <meta name="keywords" content="关键词，关键词"> 9 <meta name="description" content=""> 10 <style type="text/css"> 11 *{margin:10 auto;padding:0} 12 </style> 13 <script type="text/javascript" src="jquery-1.11.3.min.js"></script> 14 <script type="text/javascript"> 15 var ci1=['省1','省2','省3','省4']; 16 window.onload=function(){ 17 createCity1(); 18 } 19 function createCity1(){ 20 var city1=document.getElementById('city1'); 21 //创建标签,创建标签必须是参数必须是标签名 22 var op=document.createElement("option"); 23 op.innerHTML="请选择省份" 24 city1.appendChild(op); 25 // city1.appendChild("<option>请选择省份</option>");这样写是错的 26 27 for(var i=0;i<ci1.length;i++){ 28 // for(var i in cil){ //用这种可能会出现浏览器不兼容 29 var op_in=document.createElement("option"); 30 op_in.innerHTML=ci1[i]; 31 city1.appendChild(op_in) 32 } 33 } 34 $(function(){ 35 //这里就体现了jquery的强大，append方法是直接在对象后面添加content，再进行编绎。这个很牛， 36 $("#city2").append("<option>请选择省份</option>"); 37 for(var i=0;i<ci1.length;i++){ 38 $("#city2").append("<option>"+ci1[i]+"</option>"); 39 } 40 }) 41 // createCity1(); 42 </script> 43 </head> 44 <body> 45 <select id="city1"></select> 46 <select id="city2"></select> 47 48 49 </body> 50 51 </html>