<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1[1].2.6.js" type="text/javascript"></script>
<script src="jquery.provincesCity.js" type="text/javascript"></script>
<script src="provincesdata.js" type="text/javascript"></script>
<style>
#cityx select{
width:100px;
margin-left:20px;
}
</style>
<script>
//调用插件
$(function(){
$("#cityx").ProvinceCity();
});
</script>
</head>
<body>
<form method="post" action="index.jsp">
<div id="cityx"></div>
<input type=submit value="提交">
</form>
</body>
</html>
jquery.provincesCity.js代码
/**
* jQuery : 城市联动插件
* @author XiaoDong <cssrain@gmail.com>
* http://www.cssrain.cn
* @example $("#test").ProvinceCity();
* @params 暂无
*/
$.fn.ProvinceCity = function(){
var _self = this;
//定义3个默认值
_self.data("province",["请选择", "请选择"]);
_self.data("city1",["请选择", "请选择"]);
_self.data("city2",["请选择", "请选择"]);
//插入3个空的下拉框
_self.append("<select></select>");
_self.append("<select></select>");
_self.append("<select></select>");
//分别获取3个下拉框
var $sel1 = _self.find("select").eq(0);
var $sel2 = _self.find("select").eq(1);
var $sel3 = _self.find("select").eq(2);
//默认省级下拉
if(_self.data("province")){
$sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
}
$.each( GP , function(index,data){
$sel1.append("<option value='"+data+"'>"+data+"</option>");
});
//默认的1级城市下拉
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
}
//默认的2级城市下拉
if(_self.data("city2")){
$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
}
//省级联动 控制
var index1 = "" ;
$sel1.change(function(){
//清空其它2个下拉框
$sel2[0].options.length=0;
$sel3[0].options.length=0;
index1 = this.selectedIndex;
if(index1==0){ //当选择的为 “请选择” 时
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
}
if(_self.data("city2")){
$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
}
}else{
$.each( GT[index1-1] , function(index,data){
$sel2.append("<option value='"+data+"'>"+data+"</option>");
});
$.each( GC[index1-1][0] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
})
}
}).change();
//1级城市联动 控制
var index2 = "" ;
$sel2.change(function(){
$sel3[0].options.length=0;
index2 = this.selectedIndex;
$.each( GC[index1-1][index2] , function(index,data){
$sel3.append("<option value='"+data+"'>"+data+"</option>");
})
});
return _self;
};
目的：点击提交按钮，在index.jsp中显示三个下拉框的值
10 个解决方案
#1
没有人知道吗
#2
没有人知道吗
#3
该回复于2009-07-06 15:38:07被版主删除
#4
我印象中 好像用的就是简单的js啊 document.getElementById('');
#5
你的代码贴的好乱
三级联动无非就是出发onpropertychange或者onchange方法。
你可以自己写实现一下这样的触发，然后利用jquery的ajax调用server 返回相应的的select
三级联动无非就是出发onpropertychange或者onchange方法。
你可以自己写实现一下这样的触发，然后利用jquery的ajax调用server 返回相应的的select
#6
加分，加分。
#7
请问一下楼主这个问题你解决了吗？我也碰到这个问题，使用这个插件，不知道怎么获得值.
#8
是啊 楼主 怎么解决的呀？我也用这个插件
#9
action页面通过request.getParameter（“province”）request.getParameter（“city1”）request.getParameter（“city2”）
#10
我也在搞这个。可以学习下。加我Q交流下吧503490146
#1
没有人知道吗
#2
没有人知道吗
#3
该回复于2009-07-06 15:38:07被版主删除
#4
我印象中 好像用的就是简单的js啊 document.getElementById('');
#5
你的代码贴的好乱
三级联动无非就是出发onpropertychange或者onchange方法。
你可以自己写实现一下这样的触发，然后利用jquery的ajax调用server 返回相应的的select
三级联动无非就是出发onpropertychange或者onchange方法。
你可以自己写实现一下这样的触发，然后利用jquery的ajax调用server 返回相应的的select
#6
加分，加分。
#7
请问一下楼主这个问题你解决了吗？我也碰到这个问题，使用这个插件，不知道怎么获得值.
#8
是啊 楼主 怎么解决的呀？我也用这个插件
#9
action页面通过request.getParameter（“province”）request.getParameter（“city1”）request.getParameter（“city2”）
#10
我也在搞这个。可以学习下。加我Q交流下吧503490146