JAvaバックグラウンド+ajax 3段階連動を実現
19804 ワード
フロントエンド部分コード:省は予めロードされており、このページにアクセスする際、バックグラウンドで持つデータは、原理が簡単です.ここではfreemakerの静的テンプレートです.
jqコード
<tr >
<td>
<label for="j_dialog_name" class="control-label x90"> ：</label>
<select name="agent.id" id="province" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0">- -</option>
<#list listagent as agent>
<option value="${agent.id}">${agent.cname}</option>
</#list>
</select><span> </span>
<select name="agent.id" id="city" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0"> </option>
</select><span> </span>
<select name="agent.id" id="area" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0"> </option>
</select><span> ( )</span>
</td>
</tr>
jqコード
$("#province").change(function () {
$("#city option:gt(0)").remove();//
$("#area option:gt(0)").remove();
var cityid=$(this).val()//
console.log(cityid);// ，
if(cityid!=0){// ajax
$.ajax({
url: "bycity",
type: "post",
dataType: "json",
data:{
cityid:cityid
},
async: true,
success: function(data) {
if(data.stauts==0){//
var list=data.list;
console.log(list);
for (var i = 0; i < list.length; i++) {
var district = list[i];//
$("#city").append(//
"// id
+ district.cname + "");
}
}else{
alert(data.message);
}
}
});
}
});
// ，
$("#city").change(function () {
$("#area option:gt(0)").remove();
var cityid=$(this).val();
console.log(cityid);
if(cityid!=100){
$.ajax({
url: "bycity",
type: "post",
dataType: "json",
data:{
cityid:cityid
},
async: true,
success: function(data) {
if(data.stauts==0){
var list=data.list;
console.log(list);
for (var i = 0; i < list.length; i++) {
var district = list[i];//
$("#area").append(//
"// id
+ district.cname + "");
}
}else{
alert(data.message);
}
}
});
}
}); </script>