jq 地区（省市县区）联动菜单

<pre name="code" class="html"><pre name="code" class="php">4、地区数据下载地址http://download.csdn.net/detail/u011064186/7690089

3、ajax 部分

public function actionAjax()
{
$id = $_GET['pid'];
$sql = "select code,name from area where parentId = $id";
$arr = Yii::app()->db->createCommand($sql)->queryAll();
$arr = json_encode($arr);
print_r($arr);
}

2、html 部分

<span>
<select name="province1" id="province1">
<option value="-1">请选择</option>
<option value="11">北京市</option>
<option value="12">天津市</option>
<option value="13">河北省</option>
<option value="14">山西省</option>
<option value="15">内蒙古自治区</option>
<option value="21">辽宁省</option>
<option value="22">吉林省</option>
<option value="23">黑龙江省</option>
<option value="31">上海市</option>
<option value="32">江苏省</option>
<option value="33">浙江省</option>
<option value="34">安徽省</option>
<option value="35">福建省</option>
<option value="36">江西省</option>
<option value="37">山东省</option>
<option value="41">河南省</option>
<option value="42">湖北省</option>
<option value="43">湖南省</option>
<option value="44">广东省</option>
<option value="45">广西壮族自治区</option>
<option value="46">海南省</option>
<option value="50">重庆市</option>
<option value="51">四川省</option>
<option value="52">贵州省</option>
<option value="53">云南省</option>
<option value="54">西藏自治区</option>
<option value="61">陕西省</option>
<option value="62">甘肃省</option>
<option value="63">青海省</option>
<option value="64">宁夏回族自治区</option>
<option value="65">新疆维吾尔自治区</option>
<option value="71">台湾省</option>
<option value="81">香港特别行政区</option>
<option value="82">澳门特别行政区</option>
</select>
</span>
<span id="c" style='display: none'>
<label for="city-proper">市</label>
<select name="city1" id="city">

</select>
</span>
<span id="co"style='display: none'>
<label for="city-proper">县区</label>
<select name="county1" id="county">

</select>
</span>
<span id="to" style='display: none'>
<label for="city-proper">乡镇(街道)</label>
<select name="town1" id="town">

</select>
</span>

<script>
$(document).ready(function() {
$('#province1').bind('change', function() {
$("#c").css('display', 'inline-block');

$("#to").css('display', 'none');
$("#co").css('display', 'none');
var pid = $(this).val();
if (pid == '-1') {
$("#c").css('display', 'none');
}

$.ajax({
type: "get",
url: "/index.php/site/ajax",
data: {
pid: pid,
},
success: function(json) {
//alert(json);
var data = eval('(' + json + ')');//json转化为对象
var str = "";
for (var i = 0; i < data.length; i++) {
// alert(data[i].name);
console.log(str += "<option value=" + data[i].code + ">" + data[i].name + "</option>");
$("#city").empty();

$("#city").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
$("#city").append(str);

}
}
});

});
});
$(document).ready(function() {
$('#city').bind('change', function() {
$("#co").css('display', 'inline-block');
$("#to").css('display', 'none');

var pid = $(this).val();
$.ajax({
type: "get",
url: "/index.php/site/ajax",
data: {
pid: pid,
},
success: function(json) {
// alert(json);
var data = eval('(' + json + ')');//json转化为对象
var str = "";
for (var i = 0; i < data.length; i++) {
//alert(data[i].name);
str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";
$("#county").empty();

$("#county").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
$("#county").append(str);

}
}
});
});
});
$(document).ready(function() {
$('#county').bind('change', function() {
$("#to").css('display', 'inline-block');
var pid = $(this).val();
$.ajax({
type: "get",
url: "/index.php/site/ajax",
data: {
pid: pid,
},
success: function(json) {
// alert(json);
var data = eval('(' + json + ')');
var str = "";
for (var i = 0; i < data.length; i++) {
//alert(data[i].name);
str += "<option value=" + data[i].code + ">" + data[i].name + "</option>";
$("#town").empty();

$("#town").append("<option value=" + '-1' + ">" + '请选择' + "</option>");
$("#town").append(str);

}
}
});
});
});
</script>