<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<script type="text/javascript" src="region_data.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
省：<select name="province" id="province"></select>
市：<select name="city" id="city"></select>
区：<select name="county" id="county"></select>
<script type="text/javascript">
var data = JSON.parse(region_Data);
var option = "<option value='请选择'>请选择</option>";
$("#province").html(option);
$("#city").html(option);
$("#county").html(option);
// 生成省列表
for(var i=0;i<data[0].length;i++){
var str_province = data[0][i].split(":");
var p_val = str_province[0];
var option_province= '<option value ='+ data[0][i] +'>' + p_val +'</option>' ;
$("#province").append(option_province);
}
$("#province").change(function(e){
var index = $(this).children('option:selected').index() - 1;
$("#city").html('');
$("#county").html('');
$.each(data[1][index], function (index, value) {
var str_city = value.split(":");
var c_val = str_city[0];
var option_city1= '<option>请选择</option>' ;
if(index == 0){
$("#city").append(option_city1);
}
var option_city= '<option value ='+ value +'>' + c_val +'</option>' ;
$("#city").append(option_city);
});
});
$('#city').change(function(s){
$("#county").html('');
var i = $(this).children('option:selected').index() - 1;
var city_val = $(this).children('option:selected').val();
var str = city_val.split(":");
var i = str[2];
$.each(data[2][i], function (i, v) {
var str_county = v.split(":");
var co_val = str_county[0];
var option_county1= '<option>请选择</option>' ;
if(i == 0){
$("#county").append(option_county1);
}
var option_county= '<option value ='+ v +'>' + co_val +'</option>' ;
$("#county").append(option_county);
});
});
</script>
</body>
</html>