1.首先在body页面中定义好对应的select多选菜单并且定义对应的id便于选择器选择
在selelct下option中给与value定义参照值便于之后的循环迭代。
<body>
省份：<select id="provence">
<option value="0" name="provence">--请选择--</option>
<option value="1" name="provence">河南省</option>
<option value="2" name="provence">安徽省</option>
<option value="3" name="provence">江苏省</option>
<option value="4" name="provence">河北省</option>
<option value="5" name="provence">湖南省</option>
</select>
城市：<select id="city">
<option value="0" name="city">--请选择--</option>
</select>
</body>
2.定义一个二维数组用来装城市的集合。并通过基本选择器找到对应的标签元素，拿到对应标签元素后通过之前定义的value值作为参照迭代出对应的二维数组的城市内容。（期间一定要记得每次迭代前清空一次市级中的内容，防止内容叠加)
$(function () {//入口函数
//获得城市对象的下拉框
var $city = $("#city");
// 创建二维数组来表示城市，注意对应关系
var citys = [
["--请选择--"],
["商丘市", "鹿邑县", "许昌市", "开封市", "郑州市"],
["合肥市", "淮南市", "马鞍山市", "六安市", "亳州市"],
["南京市", "苏州市", "扬州市"],
["沧州市", "泊头市", "天津市"],
["长沙市", "岳阳市", "衡阳市","株洲市","邵阳市"]
];
$("#provence").change(function () {
console.log($city.get(0));
$city.get(0).length = 0;
var val = this.value;
console.log(val);
$.each(citys, function (i, n) {//代表二维数组的下标，代表二维数组中更具体的内容
if (val == i) { //判断
$(n).each(function (j, m) {//j代表每个二维数组中一维数组内容的下表，m代表一维数组的内容
//创建对象，并且添加到城市下拉框中
$city.append("<option name='city'>" + m + "</option>")
});
}
});
});
});
