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>
<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;
}
}