<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

 //                创造二维数组

                 var city=new Array(3);

                 city[0]=new Array("1","2","3");

                 city[1]=new Array("4","5","6");

                 city[2]=new Array("7","8","9");

                 city[3]=new Array("44","55","66");

 //                通过id以及给需要改变的select赋值

                 $("#pro").change(function(){

 //                每没执行一次,清空一次，否则会重复出现

                     $("#city").empty;

 //                    把当前得到的值赋值给变量val

                     var val=this.value;

 //                    jQuery写循环遍历

                     $.each(city,function(i,j){

 //                        如果当前值跟遍历的值为一样的，则再进行下一步操作，伪类证明这个循环有意义

                         if(val==i){

 //                            再次遍历拿到二维数组中的值

                             $.each(city[i],function(m,n){

 //                                创造一个文本节点,来存放文本

                                 var txt=document.createTextNode(n);

 //                                创造option标签,并声明变量来接收

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

 //                                将文本写入到标签option中

                                 $(op).append(txt);

 //                                将option标签追加到id为city的select中

                                 $(op).appendTo("#city");

                             });

                         }

                     });

                 });

             });

         </script>

<!--写一个省级的列表-->

        <select name="pro" id="pro">

            <option value="0">湖北</option>

            <option value="1">湖南</option>

            <option value="2">河北</option>

            <option value="3">河南</option>

        </select>

        <!--写一个空的列表来存放市级城市-->

        <select name="city" id="city">

        </select>