前端
<table>
<tr>
<td>产地</td>
<td>
<select name="sheng">
<option>---请选择---</option>
</select>省
<select name="shi">
<option>---请选择---</option>
</select>市
<select name="xian">
<option>---请选择---</option>
</select>县
</td>
</tr>
</table>
事件js代码
$(function(){
// 进入页面加载省份信息
$.post("city", function(data){
$(data).each(function(idx, obj){
$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=sheng]"));
});
}, "json");
// 改变省份时,改变市
$("[name=sheng]").change(function(){
var val = $("[name=sheng]").val();
// 清空之前的市
$("[name=shi]").empty();
$("<option value='-1'>---请选择---</option>").appendTo($("[name=shi]"));
// 清空之前的市
$("[name=xian]").empty();
$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
$.post("city", {data: val}, function(data){
$(data).each(function(idx, obj){
$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=shi]"));
});
}, "json");
});
// 改变市时,改变县
$("[name=shi]").change(function(){
var val = $("[name=shi]").val();
// 清空之前的市
$("[name=xian]").empty();
$("<option value='-1'>---请选择---</option>").appendTo($("[name=xian]"));
$.post("city", {data: val}, function(data){
$(data).each(function(idx, obj){
$("<option value='" + obj.id + "'>" + obj.cname + "</option>").appendTo($("[name=xian]"));
});
}, "json");
});
});