省地县三级连动三种实现方式（javascript+jsp+servlet）、（jquery+jsp+servlet）、（extjs4.0+jsp+servle）
日期：2014-05-16 浏览次数：20481 次
省市县三级连动三种实现方式（javascript+jsp+servlet）、（jquery+jsp+servlet）、（extjs4.0+jsp+servle）
方法一：（纯javascript+jsp+servlet）
<script type="text/javascript">
var request = getRequest();
function getRequest(){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
//alert("xmlRequestHttp");
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP");
alert("xobject");
}
return request;
}
function fun_init(){
// alert("init");
var url = '<%=request.getContextPath()%>/CityLinkServlet?level=1';
request.open('POST',url,true);
request.onreadystatechange = show_province;
request.send(null);
}
function change_province(_level,_code){
//alert(_level);
var url = '<%=request.getContextPath()%>/CityLinkServlet?level='+_level+'&code='+_code;
request.open('POST',url,true);
request.onreadystatechange = show_city;
request.send(null);
}
function change_city(_level,_code){
//alert(_level);
var url = '<%=request.getContextPath()%>/CityLinkServlet?level='+_level+'&code='+_code;
request.open('POST',url,true);
request.onreadystatechange = show_county;
request.send(null);
}
function show_province(){
if(request.readyState == 4){
if(request.status == 200){
var ret = request.responseText;
var jsonObj = eval("("+ret+")");
//alert(jsonObj.data.length);
//alert(document.getElementById("province"));
var obj = document.getElementById("province");
for(var i=0;i<jsonObj.length;i++){
var item = new Option(jsonObj[i].name,jsonObj[i].code);
obj.options.add(item);
}
}
}
}
function show_city(){
if(request.readyState == 4){
if(request.status == 200){
var ret = request.responseText;
var jsonObj = eval("("+ret+")");
var obj = document.getElementById("city");
obj.options.length = 1;
for(var i=0;i<jsonObj.length;i++){
var item = new Option(jsonObj[i].name,jsonObj[i].code);
obj.options.add(item);
}
}
}
}
function show_county(){
//alert(request);
if(request.readyState == 4){
if(request.status == 200){
var ret = request.responseText;
var jsonObj = eval("("+ret+")");
var obj = document.getElementById("county");
obj.options.length = 1;
for(var i=0;i<jsonObj.length;i++){
var item = new Option(jsonObj[i].name,jsonObj[i].code);
obj.options.add(item);
}
//alert(jsonObj.data.length);
}
}
}
</script>
</head>
<body onload="fun_init()">
<div>
<label>省</label>
<select id="province" onchange="change_province(2,this.value)">
<option value="--">---请选择---</option>
</select>
<br/>
<label>市</label>
<select id="city" onchange = "change_city(3,this.value)">
<option value="--">---请选择---</option>
</select>
<br/>
<label>县</label>
<select id="county">
<option value="--">---请选择---</option>
</select>
<br/>
</div>
</body>
</html>
?
方法二：（jquery+jsp+servlet）
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
var $province = $("#province");
var $city = $("#city");
var $county = $("#county");
//省份选择框变化处理函数
$province.change(function(){
//alert($province.val());
$city[0].options.length = 1;
$county[0].options.length = 1;
$.ajax({
type:'post',
url:'<%=request.getContextPath()%>/CityLinkServlet',
dataType:'json',
data:{level:'2',code:$province.val()},
success:function(ret){
$.each(ret,function(){
$city.append("<option value="+this.code+">"+this.name+"</option>");
});
},
error:function(){alert("出现未知故障");}
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
