JavaScript的DOM 编程 设置select标签的二级城市联动

<%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8" %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

< html >

  < head >

    < title > title </ title >

   

           < meta http-equiv = "pragma" content = "no-cache" >

           < meta http-equiv = "cache-control" content = "no-cache" >

           < meta http-equiv = "expires" content = "0" >

          

< script type = "text/javascript" >

          window.onload = function (){

                    //通过标签的id获取标签

                    var pd = [ "广东省" , "广西" , "浙江省" ];

                    var province          = document.getElementById( "provinceID" );

                              for ( var i =0; i<pd.length;i++){

                                       var pv = document.createElement( "option" );

                                       //添加id属性和值

                                      pv.setAttribute( "value" , i);

                                       //设置标签值

                                      pv.innerHTML = pd[i];

                                       //追加到网页上

                                      province.appendChild(pv);

                                      }

                             

                             

                              //设置二级联动

                              //根据选择的省份选择城市

                             province.onchange = function (){

                                       //获取当前选中的省份

                                       //获取选择option的value

                                      var index = this .value;

                                       var city = document.getElementById( "cityID" );

                                       var value = this .value;

                                       //定义城市二维数组

                                      cities = [[ "广州" , "佛山" , "深圳市" ],[ "南宁" , "玉林市" , "防城港" ],[ "厦门" , "福州市" ]];

                                       //获取城市数据

                                      cityData = cities[index];

                                       //清空之前的城市数据

                                       //将长度设置为1

                                      city.options.length = 1;

                                       for ( var i=0;i<cityData.length;i++){

                                                 var cy = document.createElement( "option" );

                                                cy.setAttribute( "value" , i);

                                                cy.innerHTML = cityData[i];

                                                city.appendChild(cy);

                                      }                                     

                             }

                   }

</ script >

  </ head >

 

  < body >

    < select id = "provinceID" >

           < option > 请选择省份 </ option >

    </ select >

   

    < select id = "cityID" >

           < option > 请选择城市 </ option >

    </ select >

   

   

  </ body >

</ html >