JQuery实现省市县三级联动

<select id="sheng">
</select>
<select id="shi">
</select>
<select id="xian">
</select>

var sheng01=["河南","北京","上海"];
var shi01={   "河南":["郑州","驻马店","洛阳"],
              "北京":["大兴","长安"],
              "上海":["黄埔"]
            };
var xian={"郑州":["金水区","二七区"],
          "驻马店":["古城区","驿城区"],
          "大兴":["111","222"]
};

function city () {
    $("#sheng").empty();
    $("#sheng").append("<option>--请选择--</option>");
    for (var i=0;i<sheng01.length;i++) {
        $("#sheng").append("<option>" + sheng01[i] + "</option>");
    }

}


//页面加载完成后触发
$(function(){
city();//展示省
//给省绑定事件,改变省值,则下级也改变
$("#sheng").change(function () {
 			   var s = $("#sheng").val();
    $("#shi").empty();
   			 $("#shi").append("<option>--请选择市--</option>");
   			 var citys = shi01[s];
   		 if (citys!=null) {
      			 for (var i = 0; i < citys.length; i++) {
          		   $("#shi").append("<option>" + citys[i] + "</option>");
          		}
     		}
});

//给市绑定事件
  $("#shi").change(function () {
    var s=$("#shi").val();
    		$("#xian").empty();
   		 $("#xian").append("<option>--请选择县或者区--</option>");
   		 var citys = xian[s];
    		if (citys!=null) {
      			  for (var i = 0; i < citys.length; i++) {
         	 $("#xian").append("<option>" + citys[i] + "		</option>");
    	   	 }
  		  }
})

});