Struts2+jQuery+ajax+mySql实现省市二级联动

 

Struts2+jQuery+ajax+mySql实现省市二级联动

Jquery的select操作集合

jQuery获取Select选择的Text和Value:
语法解释：
1. $("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text
3. var checkValue=$("#select_id").val();   //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index");   //获取Select最大的索引值

jQuery设置Select选择的Text和Value:
语法解释：
1. $("#select_id ").get(0).selectedIndex=1;   //设置Select索引值为1的项选中
2. $("#select_id ").val(4);    //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true);    //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项：
语法解释：
1. $("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

 

下面是一个省市二级联动实现源代码：

1、/WEB-INF/lib/下导入

struts2-json-plugin-2.1.8.jar

2．jsp文件代码片段

<%@ page  pageEncoding="utf-8"%>

<script type="text/javascript" src="../js/jquery-1.4.3.js" charset="utf-8"></script>

<script type="text/javascript" src="../js/linkage2.js" charset="utf-8"></script>

      <select name="province" id="s1" onchange="createCities();">

        <option value=''>..省份..</option>

        <option value='直辖市'>直辖市</option>

       <option value='广东省'>广东省</option>

       <option value='辽宁省'>辽宁省</option>

       <option value='江苏省'>江苏省</option>

       <option value='湖北省'>湖北省</option>

       <option value='四川省'>四川省</option>

       <option value='陕西省'>陕西省</option>

       <option value='河北省'>河北省</option>

       <option value='山西省'>山西省</option>

       <option value='河南省'>河南省</option>

       <option value='吉林省'>吉林省</option>

       <option value='山东省'>山东省</option>

       <option value='安徽省'>安徽省</option>

       <option value='浙江省'>浙江省</option>

       <option value='福建省'>福建省</option>

       <option value='云南省'>云南省</option>

       <option value='江西省'>江西省</option>

       <option value='湖南省'>湖南省</option>

       <option value='贵州省'>贵州省</option>

       <option value='海南省'>海南省</option>

       <option value='甘肃省'>甘肃省</option>

       <option value='青海省'>青海省</option>

       <option value='黑龙江省'>黑龙江省</option>

       <option value='内蒙古自治区'>内蒙古自治区</option>

       <option value='广西自治区'>广西自治区</option>

       <option value='西藏自治区'>西藏自治区</option>

       <option value='新疆自治区'>新疆自治区</option>

       <option value='宁夏自治区'>宁夏自治区</option>

     </select>

     &nbsp;

     <select name="city" id="s2">

       <option>..市/地区..</option>

     </select>

3．js代码

function createCities(){

    var province2=$('#s1').val();

    $.ajax({

       url:'createCities.action',

       type:'post',

       dataType:'json',

       data:{province:province2},

       success:createCities2

    });

}

function createCities2(json){

    var city2=json.city;

    var cities=city2.split(",");

    var s_root=document.getElementById('s2');

    s_root.options.length=0;

    $('#s2').append("<option value=''>..市/地区..</option>");

    for(i=0;i<cities.length;i++){

       var city=cities[i];

       $('#s2').append("<option value='city'>"+city+"</option>");

    }

}

4．Action代码

import com.xzmy.dao.AreanoDAO;

import com.xzmy.dao.impl.AreanoDAOImpl;

public class CreateCitys {

   private String province;

   private String city;

   public String execute(){

      AreanoDAO areanoDao=new AreanoDAOImpl();

      try {

        city=areanoDao.findByProvince(province);

        return "success";

      } catch (Exception e) {

        e.printStackTrace();

        return "error";

      }

   }

   public String getProvince() {

      return province;

   }

   public void setProvince(String province) {

      this.province = province;

   }

   public String getCity() {

      return city;

   }

   public void setCity(String city) {

      this.city = city;

   }

}