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>
