用jquery实现省市联动

<!--
需求:
	[1] 动态生成省份选择框。
	[2] 当选择了省份的某一项时, 动态改变
		城市选择中的列表项。
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script src="../JS/jquery-1.8.3.min.js"></script>
    <script>
        var pros   = ['请选择省份','广东省','湖南省','四川省'];
        var cities = [
            [],
            ['广州','汕头','珠海','茂名','东莞','惠州'],
            ['株洲', '长沙', '衡阳', '常德'],
            ['成都', '达州', '锦阳', '南充']
        ];
        $( init );

        function init(){
            //{ps} 初始化省份的数据
            makeOptions( pros, $("#province") );
        }

        //{ps} 实现代码的复用
        //功能: 产生某个下拉列表的中的数据项。
        //返回: 没有返回值.
        //  arr: 这是一个数组 ==> 所有省份 / 某一个省份的所有城市
        //  $select: 一个下拉列表的 Jquery 对象
        function makeOptions( arr, $select ){
            for (var i = 0; i < arr.length; i++){
                //创建下拉列表
                var option = document.createElement("option");
                //把省份添加进去
                option.innerText = arr[i];
                //设置值，方便之后确定选择的是哪一个
                $(option).val(i);
                //把option添加进select中
                $select.append($(option));
            }
        }

        //{ps} 当省份的值发生改变, 触发以下的函数
        function updateCity(){
            //把内容清零，不然会一直拼接
            //city.options.length = 0;
            $("#city option").remove();
            makeOptions(cities[$("#province option:selected").val()],$("#city"));
           /* for (var i = 0; i < cities.length; i++){
                if ($("#province option:selected").val() == i){
                    for (var j = 0; j < cities[i].length; j++){
                        var option = document.createElement("option");
                        $(option).text(cities[i][j]);
                        $("#city").append($(option));
                    }
                }
            }*/
        }
    </script>
</head>
<body>
    <select id="province" onchange="updateCity();"></select>
    <select id="city"></select>
</body>
</html>