jQuery的ajax(get)省市联动

来源:互联网 发布:一路发微博营销软件 编辑:程序博客网 时间:2024/05/21 16:57

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">

$(function() {

$.get('${pageContext.request.contextPath }/sys/province.action', 
  function(data){
    var jsonObj = data;
var selectValue = document.getElementById("province");
selectValue.options.length = 0;
var Item = new Option("-省-", -1);
selectValue.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.province, j.id);
selectValue.options.add(Item);
});
selectValue = document.getElementById("city");
selectValue.options.length = 0;
var Item = new Option("-市-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
  });
 
  $("#province").change(function() {
$.get('${pageContext.request.contextPath }/sys/city.action?id='+this.options[this.selectedIndex].value, 
  function(data){
    var jsonObj = data;
selectValue = document.getElementById("city");
selectValue.options.length = 0;
var Item = new Option("-市-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.city, j.id);
selectValue.options.add(Item);
});

selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
});

});

$("#city").change(function() {
$.get('${pageContext.request.contextPath }/sys/area.action?id='+this.options[this.selectedIndex].value, 
  function(data){
    var jsonObj = data;
selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.district, j.id);
selectValue.options.add(Item);
});
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
});

});

  $("#district").change(function() {
$.get('${pageContext.request.contextPath }/shop/find.action?caddress='+this.options[this.selectedIndex].value, 
  function(data){
  var jsonObj = data;
  selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.shopname, j.shopid);
selectValue.options.add(Item);
});
});

});
  

});


</script>


<select name="province" id="province" style="width:130px;">
<option value="-1">--请选择省--</option>
</select>


<select name="city" id="city" style="width:130px;">
<option value="-1">--请选择市--</option>
</select>


<select name="district" id="district" style="width:130px;">
<option value="-1">--请选择区--</option>
</select>


<select name="shopid" id="shop" style="width:130px;">
<option value="-1">--请选择店--</option>
</select>

0 0
原创粉丝点击