ajax 省市区多级联动（在struts2中），有人能做出个简单的吗？？
要用到struts2的框架，建数据库中：省、市、区 分别三个表，怎么实现？。。做得好，教教俺啊，这个小程序不难吧~~（我现在刚把struts2 环境配置好，用的myeclipse9），我会基础java,课javaweb 属于很菜鸟的，能简单教一下这个案例吗？酬劳可另算！！
一、实现思路
1.获取省份的列表值，有2种方式：一是返回List集合，在页面进行迭代；二是在业务类中将下拉列表封装好，页面通过JQuery方法写入。
这里暂时采用第二种方法。
2.前台JQuery：①数据库里面需要存的值，三者都有可能，三选一（判断是否选中了下面的级联项，按选中的最低级项为准值）；
②将三个下拉框的name属性设置为变量，便于动态设置；③当修改重定位时，因为数据库中只有一个地区编号，所以需要根据地区编号将所在地区给定位。
定位方法：通过判断所在地区的编号后面的零，如果是四个0结束即为省，二个0即为市，都符合为区县。
3.调用方法：①jsp页面上引用include/js/cascadeCity.js；②调用返回省列表的方法provinceOption(操作类型, 省份编号, 城市编号, 区县编号);
③修改实体类（该实体类即你要修改的那个实体类），在实体类中添加private String provinceNum;private String cityNum;private String countyNum;
及对应的get、set方法（添加实体类中变量可自定义），添加的这3个变量主要用于修改时定位用户已选城市地区。
二、实现
1.cascadeCity.js
/*
* subType - 操作类型
* pNum - 省份编号
* cityNum - 城市编号
* countyNum - 区县编号
*
*/
function provinceOption(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!provincesInfo.action",
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#province").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给省份进行下拉框定位
$('#province option[value=' + pNum + ']').attr('selected', 'selected');
}
getCity(subType, pNum, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//改变省份时触发
function changeProvince() {
//当操作id为province的下拉框时，触发事件
$("#province").change(function() {
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
});
}
function getparmscity(){
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
}
//改变城市时触发
function changeCity() {
//当操作id为city的下拉框时，触发事件
$("#city").change(function() {
var city_value = $("select[id='city'][@selected]").val();
getCounty(operateType, city_value);
});
}
//返回城市列表
function getCity(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!cityInfo.action?gS_PNum=" + pNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#city").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给城市定位
$('#city option[value="' + cityNum + '"]').attr('selected',true);
}
getCounty(subType, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//返回区县列表
function getCounty(subType, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!countiesInfo.action?gS_CityNum=" + cityNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#county").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给区县定位
$('#county option[value="' + countyNum + '"]').attr('selected',true);
}
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
2.jsp页面:
……
引入js
<script src="include/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="include/js/cascadeCity.js"></script>
<script type="text/javascript">
$(function() {
/***===级联城市使用===***/
changetrcompany();
changeProvince(); //改变省份选项时触发事件
changeCity(); //改变城市选项时触发事件
});
</script>
…………
<tr>
<td height="22" class=topline align="right">所属地区：</td>
<td bgcolor="#FFFFFF" height="22">
<div>
<div id="provinceDiv" class="divBL">
<select size='1' name="provinceName" id='province' class="sel"> </select></div>
<div id="cityDiv" class="divBL">
<select size='1' id='city' class="sel"> </select>
</div>
<div id="countyDiv" class="divBL">
<select size='1' id='county' class="sel"></select>
</div>
</div>
</td>
</tr>
3.struts.xml
<package name="ajaxSYS" extends="json-default" >
<action name="jsonCityAction" class="iCityAction">
<result type="json"/>
</package>
</action>
4.action类
import javax.annotation.Resource;
import org.springframework.stereotype.Component;
import com.ideamov.service.city.CityService;
import com.opensymphony.xwork2.ActionSupport;
@Component(value = "iCityAction")
public class CityAction extends ActionSupport {
private static final long serialVersionUID = -3234677100675620024L;
private CityService iCityService;
private String gS_PNum; //省份编号
private String gS_CityNum; //城市编号
private String gS_Result; //返回数据
public String provincesInfo() throws Exception {
gS_Result = iCityService.getProvincesInfo();
return SUCCESS;
}
public String cityInfo() throws Exception {
gS_Result = iCityService.getCityInfo(gS_PNum);
return SUCCESS;
}
public String countiesInfo() throws Exception {
gS_Result = iCityService.getCountiesInfo(gS_CityNum);
return SUCCESS;
}
/***=====set、get=====***/
public String getgS_Result() {
return gS_Result;
}
public String getgS_PNum() {
return gS_PNum;
}
public void setgS_PNum(String gSPNum) {
gS_PNum = gSPNum;
}
public String getGS_CityNum() {
return gS_CityNum;
}
public void setGS_CityNum(String cityNum) {
gS_CityNum = cityNum;
}
@Resource
public void setCityService(CityService iCityService) {
this.iCityService = iCityService;
}
}
5.业务层和dao层就是配合来完成数据库查询
/**
*
* 方法名: getProvincesInfo
* 方法描述: 获取省份的列表值
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getProvincesInfo() {
StringBuffer sb_Provinces = new StringBuffer();
List<TcPublicProvinces> tcPPList = iTcPPDao.findAll(TcPublicProvinces.class, "orderNum", true, new Criterion[]{Restrictions.isNotNull("num")});
for(TcPublicProvinces tcPP : tcPPList) {
sb_Provinces.append("<option value='" + tcPP.getNum() + "'>" + tcPP.getTitle() + "</option>");
}
return sb_Provinces.toString();
}
/**
*
* 方法名: getCityInfo
* 方法描述: 通过省份编号，获取到城市列表
* 参数： @param pNum - 省份编号
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getCityInfo(String pNum) {
StringBuffer sb_City = new StringBuffer();
List<TcPublicCity> tcPCList = iTcPCDao.findAll(TcPublicCity.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", pNum)});
for(TcPublicCity tcPC : tcPCList) {
sb_City.append("<option value='" + tcPC.getNum() + "'>" + tcPC.getTitle() + "</option>");
}
return sb_City.toString();
}
/**
*
* 方法名: getCountyInfo
* 方法描述: 根据城市编号，获取到区县列表的值
* 参数： @param cityNum - 城市编号
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getCountiesInfo(String cityNum) {
StringBuffer sb_Countys = new StringBuffer();
List<TcPublicCounties> tcPCsList = iTcPCsDao.findAll(TcPublicCounties.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", cityNum)});
for(TcPublicCounties tcPCs : tcPCsList) {
sb_Countys.append("<option value='" + tcPCs.getNum() + "'>" + tcPCs.getTitle() + "</option>");
}
return sb_Countys.toString();
}
PS：有问题可留蔻蔻，我加你！~good luck！~
1.获取省份的列表值，有2种方式：一是返回List集合，在页面进行迭代；二是在业务类中将下拉列表封装好，页面通过JQuery方法写入。
这里暂时采用第二种方法。
2.前台JQuery：①数据库里面需要存的值，三者都有可能，三选一（判断是否选中了下面的级联项，按选中的最低级项为准值）；
②将三个下拉框的name属性设置为变量，便于动态设置；③当修改重定位时，因为数据库中只有一个地区编号，所以需要根据地区编号将所在地区给定位。
定位方法：通过判断所在地区的编号后面的零，如果是四个0结束即为省，二个0即为市，都符合为区县。
3.调用方法：①jsp页面上引用include/js/cascadeCity.js；②调用返回省列表的方法provinceOption(操作类型, 省份编号, 城市编号, 区县编号);
③修改实体类（该实体类即你要修改的那个实体类），在实体类中添加private String provinceNum;private String cityNum;private String countyNum;
及对应的get、set方法（添加实体类中变量可自定义），添加的这3个变量主要用于修改时定位用户已选城市地区。
二、实现
1.cascadeCity.js
/*
* subType - 操作类型
* pNum - 省份编号
* cityNum - 城市编号
* countyNum - 区县编号
*
*/
function provinceOption(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!provincesInfo.action",
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#province").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给省份进行下拉框定位
$('#province option[value=' + pNum + ']').attr('selected', 'selected');
}
getCity(subType, pNum, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//改变省份时触发
function changeProvince() {
//当操作id为province的下拉框时，触发事件
$("#province").change(function() {
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
});
}
function getparmscity(){
var province_value = $("select[id='province'][@selected]").val();
getCity(operateType, province_value);
}
//改变城市时触发
function changeCity() {
//当操作id为city的下拉框时，触发事件
$("#city").change(function() {
var city_value = $("select[id='city'][@selected]").val();
getCounty(operateType, city_value);
});
}
//返回城市列表
function getCity(subType, pNum, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!cityInfo.action?gS_PNum=" + pNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#city").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给城市定位
$('#city option[value="' + cityNum + '"]').attr('selected',true);
}
getCounty(subType, cityNum, countyNum);
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
//返回区县列表
function getCounty(subType, cityNum, countyNum) {
$.ajax({
type: "POST",
url: "jsonCityAction!countiesInfo.action?gS_CityNum=" + cityNum,
dataType:"text",
success: function(json){
var obj = $.parseJSON(json);
$("#county").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result);
if(subType == "modify") {
//给区县定位
$('#county option[value="' + countyNum + '"]').attr('selected',true);
}
},
error: function(json){
alert("json=" + json);
return false;
}
});
}
2.jsp页面:
……
引入js
<script src="include/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="include/js/cascadeCity.js"></script>
<script type="text/javascript">
$(function() {
/***===级联城市使用===***/
changetrcompany();
changeProvince(); //改变省份选项时触发事件
changeCity(); //改变城市选项时触发事件
});
</script>
…………
<tr>
<td height="22" class=topline align="right">所属地区：</td>
<td bgcolor="#FFFFFF" height="22">
<div>
<div id="provinceDiv" class="divBL">
<select size='1' name="provinceName" id='province' class="sel"> </select></div>
<div id="cityDiv" class="divBL">
<select size='1' id='city' class="sel"> </select>
</div>
<div id="countyDiv" class="divBL">
<select size='1' id='county' class="sel"></select>
</div>
</div>
</td>
</tr>
3.struts.xml
<package name="ajaxSYS" extends="json-default" >
<action name="jsonCityAction" class="iCityAction">
<result type="json"/>
</package>
</action>
4.action类
import javax.annotation.Resource;
import org.springframework.stereotype.Component;
import com.ideamov.service.city.CityService;
import com.opensymphony.xwork2.ActionSupport;
@Component(value = "iCityAction")
public class CityAction extends ActionSupport {
private static final long serialVersionUID = -3234677100675620024L;
private CityService iCityService;
private String gS_PNum; //省份编号
private String gS_CityNum; //城市编号
private String gS_Result; //返回数据
public String provincesInfo() throws Exception {
gS_Result = iCityService.getProvincesInfo();
return SUCCESS;
}
public String cityInfo() throws Exception {
gS_Result = iCityService.getCityInfo(gS_PNum);
return SUCCESS;
}
public String countiesInfo() throws Exception {
gS_Result = iCityService.getCountiesInfo(gS_CityNum);
return SUCCESS;
}
/***=====set、get=====***/
public String getgS_Result() {
return gS_Result;
}
public String getgS_PNum() {
return gS_PNum;
}
public void setgS_PNum(String gSPNum) {
gS_PNum = gSPNum;
}
public String getGS_CityNum() {
return gS_CityNum;
}
public void setGS_CityNum(String cityNum) {
gS_CityNum = cityNum;
}
@Resource
public void setCityService(CityService iCityService) {
this.iCityService = iCityService;
}
}
5.业务层和dao层就是配合来完成数据库查询
/**
*
* 方法名: getProvincesInfo
* 方法描述: 获取省份的列表值
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getProvincesInfo() {
StringBuffer sb_Provinces = new StringBuffer();
List<TcPublicProvinces> tcPPList = iTcPPDao.findAll(TcPublicProvinces.class, "orderNum", true, new Criterion[]{Restrictions.isNotNull("num")});
for(TcPublicProvinces tcPP : tcPPList) {
sb_Provinces.append("<option value='" + tcPP.getNum() + "'>" + tcPP.getTitle() + "</option>");
}
return sb_Provinces.toString();
}
/**
*
* 方法名: getCityInfo
* 方法描述: 通过省份编号，获取到城市列表
* 参数： @param pNum - 省份编号
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getCityInfo(String pNum) {
StringBuffer sb_City = new StringBuffer();
List<TcPublicCity> tcPCList = iTcPCDao.findAll(TcPublicCity.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", pNum)});
for(TcPublicCity tcPC : tcPCList) {
sb_City.append("<option value='" + tcPC.getNum() + "'>" + tcPC.getTitle() + "</option>");
}
return sb_City.toString();
}
/**
*
* 方法名: getCountyInfo
* 方法描述: 根据城市编号，获取到区县列表的值
* 参数： @param cityNum - 城市编号
* 参数： @return
* 返回值：
* 异常：
*
*/
@Override
public String getCountiesInfo(String cityNum) {
StringBuffer sb_Countys = new StringBuffer();
List<TcPublicCounties> tcPCsList = iTcPCsDao.findAll(TcPublicCounties.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", cityNum)});
for(TcPublicCounties tcPCs : tcPCsList) {
sb_Countys.append("<option value='" + tcPCs.getNum() + "'>" + tcPCs.getTitle() + "</option>");
}
return sb_Countys.toString();
}
PS：有问题可留蔻蔻，我加你！~good luck！~
温馨提示：内容为网友见解，仅供参考
第1个回答 2012-04-27
直接保存成html就能运行 cs数据不全 太长了 不让发
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin:100px auto 0 auto;width:800px;">
<div style="padding:10px;">
<select id="sel11" style="width:180px;"><option>--清选择--</option></select>
<select id="sel12" style="width:180px;"><option>--清选择--</option></select>
<select id="sel13" style="width:180px;"><option>--清选择--</option></select>
</div>
<div style="padding:10px;">
<select id="sel21" style="width:180px;"><option>--清选择--</option></select>
<select id="sel22" style="width:180px;"><option>--清选择--</option></select>
<select id="sel23" style="width:180px;"><option>--清选择--</option></select>
</div>
<div style="padding:10px;">
<select id="sel31" style="width:180px;"><option>--清选择--</option></select>
<select id="sel32" style="width:180px;"><option>--清选择--</option></select>
<select id="sel33" style="width:180px;"><option>--清选择--</option></select>
</div>
</div>
</body>
<script type="text/javascript">
var MltFun=(function(){
var cs=[{bm:'4902',mc:'北京市'},{bm:'490201',mc:'市辖区'},{bm:'49020101',mc:'东城区'},{bm:'49020102',mc:'西城区'},{bm:'49020103',mc:'崇文区'},{bm:'49020104',mc:'宣武区'},{bm:'49020105',mc:'朝阳区'},{bm:'49020106',mc:'丰台区'},{bm:'49020107',mc:'石景山区'},{bm:'49020108',mc:'海淀区'},{bm:'49020109',mc:'门头沟区'},{bm:'49020110',mc:'房山区'},{bm:'49020111',mc:'通州区'},{bm:'49020112',mc:'顺义区'},{bm:'49020113',mc:'昌平区'},{bm:'49020114',mc:'大兴区'},{bm:'49020115',mc:'怀柔区'},{bm:'49020116',mc:'平谷区'},{bm:'490202',mc:'县'},{bm:'49020201',mc:'密云县'},{bm:'49020202',mc:'延庆县'},{bm:'4903',mc:'天津市'},{bm:'490301',mc:'市辖区'},{bm:'49030101',mc:'和平区'},{bm:'49030102',mc:'河东区'},{bm:'49030103',mc:'河西区'},{bm:'49030104',mc:'南开区'},{bm:'49030105',mc:'河北区'},{bm:'49030106',mc:'红桥区'},{bm:'49030107',mc:'塘沽区'},{bm:'49030108',mc:'汉沽区'},{bm:'49030109',mc:'大港区'},{bm:'49030110',mc:'东丽区'},{bm:'49030111',mc:'西青区'},{bm:'49030112',mc:'津南区'},{bm:'49030113',mc:'北辰区'},{bm:'49030114',mc:'武清区'},{bm:'49030115',mc:'宝坻区'},{bm:'490302',mc:'县'},{bm:'49030201',mc:'宁河县'},{bm:'49030202',mc:'静海县'},{bm:'49030203',mc:'蓟县'},{bm:'4904',mc:'河北省'},{bm:'490401',mc:'石家庄市'},{bm:'49040101',mc:'长安区'},{bm:'49040102',mc:'桥东区'},{bm:'49040103',mc:'桥西区'},{bm:'49040104',mc:'新华区'},{bm:'49040105',mc:'井陉矿区'},{bm:'49040106',mc:'裕华区'},{bm:'49040107',mc:'井陉县'},{bm:'49040108',mc:'正定县'},{bm:'49040109',mc:'栾城县'},{bm:'49040110',mc:'行唐县'},{bm:'49040111',mc:'灵寿县'},{bm:'49040112',mc:'高邑县'},{bm:'49040113',mc:'深泽县'},{bm:'49040114',mc:'赞皇县'},{bm:'49040115',mc:'无极县'},{bm:'49040116',mc:'平山县'},{bm:'49040117',mc:'元氏县'},{bm:'49040118',mc:'赵县'},{bm:'49040119',mc:'辛集市'},{bm:'49040120',mc:'藁城市'},{bm:'49040121',mc:'晋州市'},{bm:'49040122',mc:'新乐市'},{bm:'49040123',mc:'鹿泉市'},{bm:'490402',mc:'唐山市'},{bm:'49040201',mc:'市辖区'},{bm:'49040202',mc:'路南区'},{bm:'49040203',mc:'路北区'},{bm:'49040204',mc:'古冶区'},{bm:'49040205',mc:'开平区'},{bm:'49040206',mc:'丰南区'},{bm:'49040207',mc:'丰润区'},{bm:'49040208',mc:'滦 县'},{bm:'49040209',mc:'滦南县'},{bm:'49040210',mc:'乐亭县'},{bm:'49040211',mc:'迁西县'},{bm:'49040212',mc:'玉田县'},{bm:'49040213',mc:'唐海县'},{bm:'49040214',mc:'遵化市'},{bm:'49040215',mc:'迁安市'},{bm:'490403',mc:'秦皇岛市'},{bm:'49040301',mc:'海港区'},{bm:'49040302',mc:'山海关区'},{bm:'49040303',mc:'北戴河区'},{bm:'49040304',mc:'青龙满族自治县'},{bm:'49040305',mc:'昌黎县'},{bm:'49040306',mc:'抚宁县'},{bm:'49040307',mc:'卢龙县'},{bm:'490404',mc:'邯郸市'},{bm:'49040401',mc:'邯山区'},{bm:'49040402',mc:'丛台区'},{bm:'49040403',mc:'复兴区'},{bm:'49040404',mc:'峰峰矿区'},{bm:'49040405',mc:'邯郸县'},{bm:'49040406',mc:'临漳县'},{bm:'49040407',mc:'成安县'},{bm:'49040408',mc:'大名县'},{bm:'49040409',mc:'涉 县'},{bm:'49040410',mc:'磁 县'},{bm:'49040411',mc:'肥乡县'},{bm:'49040412',mc:'永年县'},{bm:'49040413',mc:'邱 县'},{bm:'49040414',mc:'鸡泽县'},{bm:'49040415',mc:'广平县'},{bm:'49040416',mc:'馆陶县'},{bm:'49040417',mc:'魏 县'},{bm:'49040418',mc:'曲周县'},{bm:'49040419',mc:'武安市'},{bm:'490405',mc:'邢台市'},{bm:'49040501',mc:'桥东区'},{bm:'49040502',mc:'桥西区'},{bm:'49040503',mc:'邢台县'},{bm:'49040504',mc:'临城县'},{bm:'49040505',mc:'内丘县'},{bm:'49040506',mc:'柏乡县'},{bm:'49040507',mc:'隆尧县'},{bm:'49040508',mc:'任 县'},{bm:'49040509',mc:'南和县'},{bm:'49040510',mc:'宁晋县'},{bm:'49040511',mc:'巨鹿县'},{bm:'49040512',mc:'新河县'},{bm:'49040513',mc:'广宗县'},{bm:'49040514',mc:'平乡县'},{bm:'49040515',mc:'威 县'},{bm:'49040516',mc:'清河县'},{bm:'49040517',mc:'临西县'},{bm:'49040518',mc:'南宫市'},{bm:'49040519',mc:'沙河市'},{bm:'490406',mc:'保定市'},{bm:'49040601',mc:'新市区'},{bm:'49040602',mc:'北市区'},{bm:'49040603',mc:'南市区'},{bm:'49040604',mc:'满城县'},{bm:'49040605',mc:'清苑县'},{bm:'49040606',mc:'涞水县'},{bm:'49040607',mc:'阜平县'},{bm:'49040608',mc:'徐水县'},{bm:'49040609',mc:'定兴县'},{bm:'49040610',mc:'唐 县'},{bm:'49040611',mc:'高阳县'},{bm:'49040612',mc:'容城县'},{bm:'49040613',mc:'涞源县'},{bm:'49040614',mc:'望都县'},{bm:'49040615',mc:'安新县'},{bm:'49040616',mc:'易 县'},{bm:'49040617',mc:'曲阳县'},{bm:'49040618',mc:'蠡 县'},{bm:'49040619',mc:'顺平县'},{bm:'49040620',mc:'博野县'},{bm:'49040621',mc:'雄 县'},{bm:'49040622',mc:'涿州市'},{bm:'49040623',mc:'定州市'},{bm:'49040624',mc:'安国市'},{bm:'49040625',mc:'高碑店市'},{bm:'490407',mc:'张家口市'},{bm:'49040701',mc:'桥东区'},{bm:'49040702',mc:'桥西区'},{bm:'49040703',mc:'宣化区'},{bm:'49040704',mc:'下花园区'},{bm:'49040705',mc:'宣化县'},{bm:'49040706',mc:'张北县'},{bm:'49040707',mc:'康保县'},{bm:'49040708',mc:'沽源县'},{bm:'49040709',mc:'尚义县'},{bm:'49040710',mc:'蔚 县'},{bm:'49040711',mc:'阳原县'},{bm:'49040712',mc:'怀安县'},{bm:'49040713',mc:'万全县'},{bm:'49040714',mc:'怀来县'},{bm:'49040715',mc:'涿鹿县'},{bm:'49040716',mc:'赤城县'},{bm:'49040717',mc:'崇礼县'},{bm:'490408',mc:'承德市'},{bm:'49040801',mc:'双桥区'},{bm:'49040802',mc:'双滦区'},{bm:'49040803',mc:'鹰手营子矿区'},{bm:'49040804',mc:'承德县'},{bm:'49040805',mc:'兴隆县'},{bm:'49040806',mc:'平泉县'},{bm:'49040807',mc:'滦平县'},{bm:'49040808',mc:'隆化县'},{bm:'49040809',mc:'丰宁满族自治县'},{bm:'49040810',mc:'宽城满族自治县'},{bm:'49040811',mc:'围场满族蒙古族自治县'},{bm:'490409',mc:'沧州市'},{bm:'49040901',mc:'新华区'},{bm:'49040902',mc:'运河区'},{bm:'49040903',mc:'沧 县'},{bm:'49040904',mc:'青 县'},{bm:'49040905',mc:'东光县'},{bm:'49040906',mc:'海兴县'},{bm:'49040907',mc:'盐山县'},{bm:'49040908',mc:'肃宁县'},{bm:'49040909',mc:'南皮县'},{bm:'49040910',mc:'吴桥县'},{bm:'49040911',mc:'献 县'},{bm:'49040912',mc:'孟村回族自治县'},{bm:'49040913',mc:'泊头市'},{bm:'49040914',mc:'任丘市'},{bm:'49040915',mc:'黄骅市'},{bm:'49040916',mc:'河间市'},{bm:'490410',mc:'廊坊市'},{bm:'49041001',mc:'安次区'},{bm:'49041002',mc:'广阳区'},{bm:'49041003',mc:'固安县'},{bm:'49041004',mc:'永清县'},{bm:'49041005',mc:'香河县'},{bm:'49041006',mc:'大城县'},{bm:'49041007',mc:'文安县'},{bm:'49041008',mc:'大厂回族自治县'},{bm:'49041009',mc:'霸州市'},{bm:'49041010',mc:'三河市'},{bm:'490411',mc:'衡水市'},{bm:'49041101',mc:'桃城区'},{bm:'49041102',mc:'枣强县'},{bm:'49041103',mc:'武邑县'},{bm:'49041104',mc:'武强县'},{bm:'49041105',mc:'饶阳县'},{bm:'49041106',mc:'安平县'},{bm:'49041107',mc:'故城县'},{bm:'49041108',mc:'景 县'},{bm:'49041109',mc:'阜城县'},{bm:'49041110',mc:'冀州市'},{bm:'49041111',mc:'深州市'}];
var cl=cs.length;
return function(sel1,sel2,sel3){
for(var i=0;i<cl;i++){
if(cs[i].bm.length==4){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel1.options.add(opt);
}
}
sel1.onchange=function(){
var val=this.value;
if(!val){
return;
}
sel2.options[0].selected=true;
for(var i=sel2.options.length-1;i;i--){
sel2.options.remove(i);
}
sel3.options[0].selected=true;
for(var i=sel3.options.length-1;i;i--){
sel3.options.remove(i);
}
var reg=new RegExp('^'+val+'[0-9]{2}$');
for(var i=0;i<cl;i++){
if(reg.test(cs[i].bm)){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel2.options.add(opt);
}
}
};
sel2.onchange=function(){
var val=this.value;
if(!val){
return;
}
sel3.options[0].selected=true;
for(var i=sel3.options.length-1;i;i--){
sel3.options.remove(i);
}
var reg=new RegExp(val+'[0-9]{2}');
for(var i=0;i<cl;i++){
if(reg.test(cs[i].bm)){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel3.options.add(opt);
}
}
};
};
})();
MltFun(document.getElementById('sel11'),document.getElementById('sel12'),document.getElementById('sel13'));
MltFun(document.getElementById('sel21'),document.getElementById('sel22'),document.getElementById('sel23'));
MltFun(document.getElementById('sel31'),document.getElementById('sel32'),document.getElementById('sel33'));
</script>
</html>追问
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="margin:100px auto 0 auto;width:800px;">
<div style="padding:10px;">
<select id="sel11" style="width:180px;"><option>--清选择--</option></select>
<select id="sel12" style="width:180px;"><option>--清选择--</option></select>
<select id="sel13" style="width:180px;"><option>--清选择--</option></select>
</div>
<div style="padding:10px;">
<select id="sel21" style="width:180px;"><option>--清选择--</option></select>
<select id="sel22" style="width:180px;"><option>--清选择--</option></select>
<select id="sel23" style="width:180px;"><option>--清选择--</option></select>
</div>
<div style="padding:10px;">
<select id="sel31" style="width:180px;"><option>--清选择--</option></select>
<select id="sel32" style="width:180px;"><option>--清选择--</option></select>
<select id="sel33" style="width:180px;"><option>--清选择--</option></select>
</div>
</div>
</body>
<script type="text/javascript">
var MltFun=(function(){
var cs=[{bm:'4902',mc:'北京市'},{bm:'490201',mc:'市辖区'},{bm:'49020101',mc:'东城区'},{bm:'49020102',mc:'西城区'},{bm:'49020103',mc:'崇文区'},{bm:'49020104',mc:'宣武区'},{bm:'49020105',mc:'朝阳区'},{bm:'49020106',mc:'丰台区'},{bm:'49020107',mc:'石景山区'},{bm:'49020108',mc:'海淀区'},{bm:'49020109',mc:'门头沟区'},{bm:'49020110',mc:'房山区'},{bm:'49020111',mc:'通州区'},{bm:'49020112',mc:'顺义区'},{bm:'49020113',mc:'昌平区'},{bm:'49020114',mc:'大兴区'},{bm:'49020115',mc:'怀柔区'},{bm:'49020116',mc:'平谷区'},{bm:'490202',mc:'县'},{bm:'49020201',mc:'密云县'},{bm:'49020202',mc:'延庆县'},{bm:'4903',mc:'天津市'},{bm:'490301',mc:'市辖区'},{bm:'49030101',mc:'和平区'},{bm:'49030102',mc:'河东区'},{bm:'49030103',mc:'河西区'},{bm:'49030104',mc:'南开区'},{bm:'49030105',mc:'河北区'},{bm:'49030106',mc:'红桥区'},{bm:'49030107',mc:'塘沽区'},{bm:'49030108',mc:'汉沽区'},{bm:'49030109',mc:'大港区'},{bm:'49030110',mc:'东丽区'},{bm:'49030111',mc:'西青区'},{bm:'49030112',mc:'津南区'},{bm:'49030113',mc:'北辰区'},{bm:'49030114',mc:'武清区'},{bm:'49030115',mc:'宝坻区'},{bm:'490302',mc:'县'},{bm:'49030201',mc:'宁河县'},{bm:'49030202',mc:'静海县'},{bm:'49030203',mc:'蓟县'},{bm:'4904',mc:'河北省'},{bm:'490401',mc:'石家庄市'},{bm:'49040101',mc:'长安区'},{bm:'49040102',mc:'桥东区'},{bm:'49040103',mc:'桥西区'},{bm:'49040104',mc:'新华区'},{bm:'49040105',mc:'井陉矿区'},{bm:'49040106',mc:'裕华区'},{bm:'49040107',mc:'井陉县'},{bm:'49040108',mc:'正定县'},{bm:'49040109',mc:'栾城县'},{bm:'49040110',mc:'行唐县'},{bm:'49040111',mc:'灵寿县'},{bm:'49040112',mc:'高邑县'},{bm:'49040113',mc:'深泽县'},{bm:'49040114',mc:'赞皇县'},{bm:'49040115',mc:'无极县'},{bm:'49040116',mc:'平山县'},{bm:'49040117',mc:'元氏县'},{bm:'49040118',mc:'赵县'},{bm:'49040119',mc:'辛集市'},{bm:'49040120',mc:'藁城市'},{bm:'49040121',mc:'晋州市'},{bm:'49040122',mc:'新乐市'},{bm:'49040123',mc:'鹿泉市'},{bm:'490402',mc:'唐山市'},{bm:'49040201',mc:'市辖区'},{bm:'49040202',mc:'路南区'},{bm:'49040203',mc:'路北区'},{bm:'49040204',mc:'古冶区'},{bm:'49040205',mc:'开平区'},{bm:'49040206',mc:'丰南区'},{bm:'49040207',mc:'丰润区'},{bm:'49040208',mc:'滦 县'},{bm:'49040209',mc:'滦南县'},{bm:'49040210',mc:'乐亭县'},{bm:'49040211',mc:'迁西县'},{bm:'49040212',mc:'玉田县'},{bm:'49040213',mc:'唐海县'},{bm:'49040214',mc:'遵化市'},{bm:'49040215',mc:'迁安市'},{bm:'490403',mc:'秦皇岛市'},{bm:'49040301',mc:'海港区'},{bm:'49040302',mc:'山海关区'},{bm:'49040303',mc:'北戴河区'},{bm:'49040304',mc:'青龙满族自治县'},{bm:'49040305',mc:'昌黎县'},{bm:'49040306',mc:'抚宁县'},{bm:'49040307',mc:'卢龙县'},{bm:'490404',mc:'邯郸市'},{bm:'49040401',mc:'邯山区'},{bm:'49040402',mc:'丛台区'},{bm:'49040403',mc:'复兴区'},{bm:'49040404',mc:'峰峰矿区'},{bm:'49040405',mc:'邯郸县'},{bm:'49040406',mc:'临漳县'},{bm:'49040407',mc:'成安县'},{bm:'49040408',mc:'大名县'},{bm:'49040409',mc:'涉 县'},{bm:'49040410',mc:'磁 县'},{bm:'49040411',mc:'肥乡县'},{bm:'49040412',mc:'永年县'},{bm:'49040413',mc:'邱 县'},{bm:'49040414',mc:'鸡泽县'},{bm:'49040415',mc:'广平县'},{bm:'49040416',mc:'馆陶县'},{bm:'49040417',mc:'魏 县'},{bm:'49040418',mc:'曲周县'},{bm:'49040419',mc:'武安市'},{bm:'490405',mc:'邢台市'},{bm:'49040501',mc:'桥东区'},{bm:'49040502',mc:'桥西区'},{bm:'49040503',mc:'邢台县'},{bm:'49040504',mc:'临城县'},{bm:'49040505',mc:'内丘县'},{bm:'49040506',mc:'柏乡县'},{bm:'49040507',mc:'隆尧县'},{bm:'49040508',mc:'任 县'},{bm:'49040509',mc:'南和县'},{bm:'49040510',mc:'宁晋县'},{bm:'49040511',mc:'巨鹿县'},{bm:'49040512',mc:'新河县'},{bm:'49040513',mc:'广宗县'},{bm:'49040514',mc:'平乡县'},{bm:'49040515',mc:'威 县'},{bm:'49040516',mc:'清河县'},{bm:'49040517',mc:'临西县'},{bm:'49040518',mc:'南宫市'},{bm:'49040519',mc:'沙河市'},{bm:'490406',mc:'保定市'},{bm:'49040601',mc:'新市区'},{bm:'49040602',mc:'北市区'},{bm:'49040603',mc:'南市区'},{bm:'49040604',mc:'满城县'},{bm:'49040605',mc:'清苑县'},{bm:'49040606',mc:'涞水县'},{bm:'49040607',mc:'阜平县'},{bm:'49040608',mc:'徐水县'},{bm:'49040609',mc:'定兴县'},{bm:'49040610',mc:'唐 县'},{bm:'49040611',mc:'高阳县'},{bm:'49040612',mc:'容城县'},{bm:'49040613',mc:'涞源县'},{bm:'49040614',mc:'望都县'},{bm:'49040615',mc:'安新县'},{bm:'49040616',mc:'易 县'},{bm:'49040617',mc:'曲阳县'},{bm:'49040618',mc:'蠡 县'},{bm:'49040619',mc:'顺平县'},{bm:'49040620',mc:'博野县'},{bm:'49040621',mc:'雄 县'},{bm:'49040622',mc:'涿州市'},{bm:'49040623',mc:'定州市'},{bm:'49040624',mc:'安国市'},{bm:'49040625',mc:'高碑店市'},{bm:'490407',mc:'张家口市'},{bm:'49040701',mc:'桥东区'},{bm:'49040702',mc:'桥西区'},{bm:'49040703',mc:'宣化区'},{bm:'49040704',mc:'下花园区'},{bm:'49040705',mc:'宣化县'},{bm:'49040706',mc:'张北县'},{bm:'49040707',mc:'康保县'},{bm:'49040708',mc:'沽源县'},{bm:'49040709',mc:'尚义县'},{bm:'49040710',mc:'蔚 县'},{bm:'49040711',mc:'阳原县'},{bm:'49040712',mc:'怀安县'},{bm:'49040713',mc:'万全县'},{bm:'49040714',mc:'怀来县'},{bm:'49040715',mc:'涿鹿县'},{bm:'49040716',mc:'赤城县'},{bm:'49040717',mc:'崇礼县'},{bm:'490408',mc:'承德市'},{bm:'49040801',mc:'双桥区'},{bm:'49040802',mc:'双滦区'},{bm:'49040803',mc:'鹰手营子矿区'},{bm:'49040804',mc:'承德县'},{bm:'49040805',mc:'兴隆县'},{bm:'49040806',mc:'平泉县'},{bm:'49040807',mc:'滦平县'},{bm:'49040808',mc:'隆化县'},{bm:'49040809',mc:'丰宁满族自治县'},{bm:'49040810',mc:'宽城满族自治县'},{bm:'49040811',mc:'围场满族蒙古族自治县'},{bm:'490409',mc:'沧州市'},{bm:'49040901',mc:'新华区'},{bm:'49040902',mc:'运河区'},{bm:'49040903',mc:'沧 县'},{bm:'49040904',mc:'青 县'},{bm:'49040905',mc:'东光县'},{bm:'49040906',mc:'海兴县'},{bm:'49040907',mc:'盐山县'},{bm:'49040908',mc:'肃宁县'},{bm:'49040909',mc:'南皮县'},{bm:'49040910',mc:'吴桥县'},{bm:'49040911',mc:'献 县'},{bm:'49040912',mc:'孟村回族自治县'},{bm:'49040913',mc:'泊头市'},{bm:'49040914',mc:'任丘市'},{bm:'49040915',mc:'黄骅市'},{bm:'49040916',mc:'河间市'},{bm:'490410',mc:'廊坊市'},{bm:'49041001',mc:'安次区'},{bm:'49041002',mc:'广阳区'},{bm:'49041003',mc:'固安县'},{bm:'49041004',mc:'永清县'},{bm:'49041005',mc:'香河县'},{bm:'49041006',mc:'大城县'},{bm:'49041007',mc:'文安县'},{bm:'49041008',mc:'大厂回族自治县'},{bm:'49041009',mc:'霸州市'},{bm:'49041010',mc:'三河市'},{bm:'490411',mc:'衡水市'},{bm:'49041101',mc:'桃城区'},{bm:'49041102',mc:'枣强县'},{bm:'49041103',mc:'武邑县'},{bm:'49041104',mc:'武强县'},{bm:'49041105',mc:'饶阳县'},{bm:'49041106',mc:'安平县'},{bm:'49041107',mc:'故城县'},{bm:'49041108',mc:'景 县'},{bm:'49041109',mc:'阜城县'},{bm:'49041110',mc:'冀州市'},{bm:'49041111',mc:'深州市'}];
var cl=cs.length;
return function(sel1,sel2,sel3){
for(var i=0;i<cl;i++){
if(cs[i].bm.length==4){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel1.options.add(opt);
}
}
sel1.onchange=function(){
var val=this.value;
if(!val){
return;
}
sel2.options[0].selected=true;
for(var i=sel2.options.length-1;i;i--){
sel2.options.remove(i);
}
sel3.options[0].selected=true;
for(var i=sel3.options.length-1;i;i--){
sel3.options.remove(i);
}
var reg=new RegExp('^'+val+'[0-9]{2}$');
for(var i=0;i<cl;i++){
if(reg.test(cs[i].bm)){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel2.options.add(opt);
}
}
};
sel2.onchange=function(){
var val=this.value;
if(!val){
return;
}
sel3.options[0].selected=true;
for(var i=sel3.options.length-1;i;i--){
sel3.options.remove(i);
}
var reg=new RegExp(val+'[0-9]{2}');
for(var i=0;i<cl;i++){
if(reg.test(cs[i].bm)){
var opt=document.createElement('option');
opt.innerHTML=cs[i].mc;
opt.value=cs[i].bm;
sel3.options.add(opt);
}
}
};
};
})();
MltFun(document.getElementById('sel11'),document.getElementById('sel12'),document.getElementById('sel13'));
MltFun(document.getElementById('sel21'),document.getElementById('sel22'),document.getElementById('sel23'));
MltFun(document.getElementById('sel31'),document.getElementById('sel32'),document.getElementById('sel33'));
</script>
</html>追问
我有直接在HTML上跑的纯js的多级联动的，但是想学struts框架中跑起来，数据要往数据库中纯的，省市区要建三个表的，麻烦看一下我的要求。。。
追答其实我看了你的要求了
ajax联动之前用的 现在觉得效率低都改成一次加载了 你要代码还是参考1楼咯
第2个回答 2012-04-27
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>PPS需求管理系统</title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<script type="text/javascript" src="js/easyui/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<LINK rel=stylesheet type=text/css href="css/buslist.css">
<script type="text/javascript">
$(function(){
changeNoticeLevel('ftNoticeId','ftType');
changeCates('busModuleId','busCategoryId','busContactId','add','');
opinionMonId();
});
function changeNoticeLevel(ftType,ts) {
var tpVal = $('#' + ftType).val();
$.ajax({
url : 'individual/iflow_getFaultNoticeLevels',
data : 'falutTypeId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+ftType).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+ftType).append(
"<option value='" + dat[i].oid + "' >" + dat[i].faultLevelName
+ "</option>");
}
}
});
}
function changeUsers(usr,ts,tip) {
$.ajax({
url : 'individual/iflow_getContactsByBusModuleId',
data : 'businessId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+usr).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+usr).append(
"<option value='" + dat[i].userId + "' >" + dat[i].trueName
+ "</option>");
}
if(tip=='add'){
changeMonitorId();
}
}
});
}
function changeCates(usr,ts,tio,tip,busId){
$.ajax({
url : 'individual/iflow_getAllBusModule',
data : 'cateId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+usr).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+usr).append(
"<option value='" + dat[i].businessId + "' >" + dat[i].businessName
+ "</option>");
}
if(tip=='add'){
changeMonitorId();
}
if(busId != ''){
$("#"+usr).val(busId);
}
$.ajax({
url : 'individual/iflow_getContactsByBusModuleId',
data : 'businessId=' + $('#'+usr).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dta) {
$("#"+tio).empty();
var data=dta.rows;
for ( var i = 0; i < data.length; i++) {
$("#"+tio).append(
"<option value='" + data[i].userId + "' >" + data[i].trueName
+ "</option>");
}
}
});
}
});
}
function changeMonitorId() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1<10?"0"+(date.getMonth()+1):(date.getMonth()+1);
var day = date.getDate()<10?"0"+date.getDate():date.getDate();
var modId = year+""+month+""+day+"01";
$('#monitorId').val(modId);
}
//监控ID的随机生成
function mIdGetRandom(n) {
var num = Math.floor(Math.random() * n );
var monId = $('#monitorId').val();
var n = num<10?"0"+num:num;
var mID = monId.substring(0, 8) + n;
$('#monitorId').val(mID);
}
//监控ID添加时的判断
function opinionMonId(){
$("#monitorId").blur(function (){
var monId = $("#monitorId");
$.ajax( {
url : 'busmon_loadMonitorID?monId=' + monId.val(),
type : 'post',
dataType : "json",
async:false,
success : function(data) {
if (data.monitorID == 0) {
return true;
} else {
changeMonitorId();
$.messager.show({title:'警告',msg:'监控ID已存在，请重新获得在输入或生成！',timeout:3000,showType: 'slide'});
return false;
}
}
});
});
}
</script>
<style type="text/css">
BODY{
font-size: 12px;
background-color: #fff;
}
</style>
</head>
<body>
<div style="margin-left:10pt;margin-top: 10pt; " align="left"> 个人申请监控点列表>><b>个人监控点申请</b><hr width="300" align="left"/></div>
<div align="center" id="main" style="padding: 10px;">
<form id="monAdd" method="post" action="individual/iflow_applyMon">
<table>
<tr>
<td class="form_head">业务类名称： </td>
<td class="form_field" >
<select id="busCategoryId" name="busCategoryId" onchange="changeCates('busModuleId','busCategoryId','busContactId','add','')">
<c:forEach var="item" items="${cates}">
<option value="${item[0]}" >${item[1]}</option>
</c:forEach>
</select>
<b><font size="-1">业务模块名称：</font></b>
<select id="busModuleId" name="flow.businessId" onchange="changeUsers('busContactId','busModuleId','add')" >
</select>
</td>
<td class="form_head">监控点ID： </td>
<td align="left" valign="middle" class="form_field">
<input type="text" id="monitorId" min="1000000" name="flow.monitorId"
precision="0" required="true"
missingMessage="监控ID是必填内容，只能是数字" class="easyui-numberbox"></input>
<input type="button" id="setMonId" value="生成随机ID" onclick='mIdGetRandom(89)' ></input>
</td>
</tr>
<tr>
<td class="form_head">监控点名称：</td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="monitorName" name="flow.monitorName" class="easyui-validatebox" required="true" missingMessage="监控名是必填内容"></input>
</td>
<td class="form_head">逻辑主机号：</td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="logicHostId" name="flow.logicHostId"></input>
</td>
</tr>
<tr>
<td class="form_head">故障类型：</td>
<td class="form_field">
<select id="ftType" onchange="changeNoticeLevel('ftNoticeId','ftType');">
<c:forEach items="${faultTypes}" var="ftType" >
<option value="${ftType[0]}">${ftType[1]}</option>
</c:forEach>
</select>
</td>
<td class="form_head">故障通知级别： </td>
<td align="left" valign="middle" class="form_field" >
<select id="ftNoticeId" name="flow.ftNoticeLevelId">
</select>
</td>
</tr>
<tr>
<td class="form_head " >业务监控组：</td>
<td class="form_field " style="font-size: 12px;">
<select id="busMonitorId" name="flow.busMonitorId">
<c:forEach items="${monitorLst}" var="item">
<option value="${item.groupId}">${item.dname}</option>
</c:forEach>
</select>
</td>
<td class="form_head " >业务运维组：</td>
<td class="form_field " style="font-size: 12px;">
<select id="busOperateId" name="flow.busOperateId">
<option value="">--请选择--</option>
<c:forEach items="${operateLst}" var="item">
<option value="${item.groupId}" <c:if test="${item.groupId==busModule.busOperateId}">selected="selected"</c:if>>${item.dname}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td class="form_head">预警次数 ： </td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="warnCount" name="flow.warnCount" min="1" max="10000" precision="0" required="true" missingMessage="预警阀值只能是数字,并且范围在1~10000!" class="easyui-numberbox"></input>
</td>
<td class="form_head">检测间隔：</td>
<td align="left" valign="middle" class="form_field" >
<input id="scheduleSpan" name="flow.scheduleSpan" type="text" min="1" precision="0" required="true" missingMessage="检测间隔只能是数字!" class="easyui-numberbox"/><span style="font-size: 12px;">s</span>
</td>
</tr>
<tr>
<td class="form_head">接口负责人：</td>
<td align="left" valign="middle" class="form_field" >
<select id="busContactId" name="flow.busContactId">
</select>
</td>
<td height="60" align="left" valign="middle" class="form_head">接口功能：</td>
<td align="left" valign="middle" class="form_field" >
<textarea rows="" style="font-size: 12px;" cols="55" rows="10" id="remarks" name="flow.remarks"></textarea>
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" colspan="4" >
<input type="submit" value="提交" />
<input type="button" value="返回" id="monAddClose" onclick="javascript:window.history.back();"/>
</td>
</tr>
</table>
</form>
</div>
</body>
我写的一个列子。 你可以看看 我想具体的通过ID查数据你还是会吧！ 不动再问！ 我天天在线追问
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>PPS需求管理系统</title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<script type="text/javascript" src="js/easyui/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<LINK rel=stylesheet type=text/css href="css/buslist.css">
<script type="text/javascript">
$(function(){
changeNoticeLevel('ftNoticeId','ftType');
changeCates('busModuleId','busCategoryId','busContactId','add','');
opinionMonId();
});
function changeNoticeLevel(ftType,ts) {
var tpVal = $('#' + ftType).val();
$.ajax({
url : 'individual/iflow_getFaultNoticeLevels',
data : 'falutTypeId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+ftType).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+ftType).append(
"<option value='" + dat[i].oid + "' >" + dat[i].faultLevelName
+ "</option>");
}
}
});
}
function changeUsers(usr,ts,tip) {
$.ajax({
url : 'individual/iflow_getContactsByBusModuleId',
data : 'businessId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+usr).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+usr).append(
"<option value='" + dat[i].userId + "' >" + dat[i].trueName
+ "</option>");
}
if(tip=='add'){
changeMonitorId();
}
}
});
}
function changeCates(usr,ts,tio,tip,busId){
$.ajax({
url : 'individual/iflow_getAllBusModule',
data : 'cateId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+usr).empty();
for ( var i = 0; i < dat.length; i++) {
$("#"+usr).append(
"<option value='" + dat[i].businessId + "' >" + dat[i].businessName
+ "</option>");
}
if(tip=='add'){
changeMonitorId();
}
if(busId != ''){
$("#"+usr).val(busId);
}
$.ajax({
url : 'individual/iflow_getContactsByBusModuleId',
data : 'businessId=' + $('#'+usr).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dta) {
$("#"+tio).empty();
var data=dta.rows;
for ( var i = 0; i < data.length; i++) {
$("#"+tio).append(
"<option value='" + data[i].userId + "' >" + data[i].trueName
+ "</option>");
}
}
});
}
});
}
function changeMonitorId() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1<10?"0"+(date.getMonth()+1):(date.getMonth()+1);
var day = date.getDate()<10?"0"+date.getDate():date.getDate();
var modId = year+""+month+""+day+"01";
$('#monitorId').val(modId);
}
//监控ID的随机生成
function mIdGetRandom(n) {
var num = Math.floor(Math.random() * n );
var monId = $('#monitorId').val();
var n = num<10?"0"+num:num;
var mID = monId.substring(0, 8) + n;
$('#monitorId').val(mID);
}
//监控ID添加时的判断
function opinionMonId(){
$("#monitorId").blur(function (){
var monId = $("#monitorId");
$.ajax( {
url : 'busmon_loadMonitorID?monId=' + monId.val(),
type : 'post',
dataType : "json",
async:false,
success : function(data) {
if (data.monitorID == 0) {
return true;
} else {
changeMonitorId();
$.messager.show({title:'警告',msg:'监控ID已存在，请重新获得在输入或生成！',timeout:3000,showType: 'slide'});
return false;
}
}
});
});
}
</script>
<style type="text/css">
BODY{
font-size: 12px;
background-color: #fff;
}
</style>
</head>
<body>
<div style="margin-left:10pt;margin-top: 10pt; " align="left"> 个人申请监控点列表>><b>个人监控点申请</b><hr width="300" align="left"/></div>
<div align="center" id="main" style="padding: 10px;">
<form id="monAdd" method="post" action="individual/iflow_applyMon">
<table>
<tr>
<td class="form_head">业务类名称： </td>
<td class="form_field" >
<select id="busCategoryId" name="busCategoryId" onchange="changeCates('busModuleId','busCategoryId','busContactId','add','')">
<c:forEach var="item" items="${cates}">
<option value="${item[0]}" >${item[1]}</option>
</c:forEach>
</select>
<b><font size="-1">业务模块名称：</font></b>
<select id="busModuleId" name="flow.businessId" onchange="changeUsers('busContactId','busModuleId','add')" >
</select>
</td>
<td class="form_head">监控点ID： </td>
<td align="left" valign="middle" class="form_field">
<input type="text" id="monitorId" min="1000000" name="flow.monitorId"
precision="0" required="true"
missingMessage="监控ID是必填内容，只能是数字" class="easyui-numberbox"></input>
<input type="button" id="setMonId" value="生成随机ID" onclick='mIdGetRandom(89)' ></input>
</td>
</tr>
<tr>
<td class="form_head">监控点名称：</td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="monitorName" name="flow.monitorName" class="easyui-validatebox" required="true" missingMessage="监控名是必填内容"></input>
</td>
<td class="form_head">逻辑主机号：</td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="logicHostId" name="flow.logicHostId"></input>
</td>
</tr>
<tr>
<td class="form_head">故障类型：</td>
<td class="form_field">
<select id="ftType" onchange="changeNoticeLevel('ftNoticeId','ftType');">
<c:forEach items="${faultTypes}" var="ftType" >
<option value="${ftType[0]}">${ftType[1]}</option>
</c:forEach>
</select>
</td>
<td class="form_head">故障通知级别： </td>
<td align="left" valign="middle" class="form_field" >
<select id="ftNoticeId" name="flow.ftNoticeLevelId">
</select>
</td>
</tr>
<tr>
<td class="form_head " >业务监控组：</td>
<td class="form_field " style="font-size: 12px;">
<select id="busMonitorId" name="flow.busMonitorId">
<c:forEach items="${monitorLst}" var="item">
<option value="${item.groupId}">${item.dname}</option>
</c:forEach>
</select>
</td>
<td class="form_head " >业务运维组：</td>
<td class="form_field " style="font-size: 12px;">
<select id="busOperateId" name="flow.busOperateId">
<option value="">--请选择--</option>
<c:forEach items="${operateLst}" var="item">
<option value="${item.groupId}" <c:if test="${item.groupId==busModule.busOperateId}">selected="selected"</c:if>>${item.dname}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td class="form_head">预警次数 ： </td>
<td align="left" valign="middle" class="form_field" >
<input type="text" id="warnCount" name="flow.warnCount" min="1" max="10000" precision="0" required="true" missingMessage="预警阀值只能是数字,并且范围在1~10000!" class="easyui-numberbox"></input>
</td>
<td class="form_head">检测间隔：</td>
<td align="left" valign="middle" class="form_field" >
<input id="scheduleSpan" name="flow.scheduleSpan" type="text" min="1" precision="0" required="true" missingMessage="检测间隔只能是数字!" class="easyui-numberbox"/><span style="font-size: 12px;">s</span>
</td>
</tr>
<tr>
<td class="form_head">接口负责人：</td>
<td align="left" valign="middle" class="form_field" >
<select id="busContactId" name="flow.busContactId">
</select>
</td>
<td height="60" align="left" valign="middle" class="form_head">接口功能：</td>
<td align="left" valign="middle" class="form_field" >
<textarea rows="" style="font-size: 12px;" cols="55" rows="10" id="remarks" name="flow.remarks"></textarea>
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" colspan="4" >
<input type="submit" value="提交" />
<input type="button" value="返回" id="monAddClose" onclick="javascript:window.history.back();"/>
</td>
</tr>
</table>
</form>
</div>
</body>
我写的一个列子。 你可以看看 我想具体的通过ID查数据你还是会吧！ 不动再问！ 我天天在线追问
我只要省市区的3级联动，话说您这个一股脑的看的头大啊~~有没有给来点注释啥的。。
追答级联其实很简单只要先把查询语句写好。再通过ajax访问action返回数据加载下拉框就可以了！
${item[1]}
业务模块名称：
这是两个下拉框，第一个下拉框是通过action传值过来加载的，然后通过onchange事件访问js函数调用ajax访问action返回值加载下拉框。
js：
function changeUsers(usr,ts,tip) {
$.ajax({
url : 'individual/iflow_getContactsByBusModuleId',
data : 'businessId=' + $('#'+ts).val(),
type : 'post',
dataType : 'json',
cache : false,
success : function(dt) {
var dat=dt.rows;
$("#"+usr).empty();
for ( var i = 0; i " + dat[i].trueName+ "");
}
}
});
}
第3个回答 2015-07-19
多级联动实现：
<form action="http://www.sharejs.com" method=post name="creator" enctype="multipart/form-data">
<script language="javascript">
<!--
var where = new Array(35);
function comefrom(loca,locacity) { this.loca = loca; this.locacity = locacity; }
where[0]= new comefrom("请选择省份名","请选择城市名");
where[1] = new comefrom("北京","|东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆");
where[2] = new comefrom("上海","|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明");
where[3] = new comefrom("天津","|和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县");
where[4] = new comefrom("重庆","|万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁|大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川");
where[5] = new comefrom("河北","|石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水");
where[6] = new comefrom("山西","|太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");
where[7] = new comefrom("内蒙古","|呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟");
where[8] = new comefrom("辽宁","|沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛");
where[9] = new comefrom("吉林","|长春|吉林|四平|辽源|通化|白山|松原|白城|延边");
where[10] = new comefrom("黑龙江","|哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭");
where[11] = new comefrom("江苏","|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安");
where[12] = new comefrom("浙江","|杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水");
where[13] = new comefrom("安徽","|合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州");
where[14] = new comefrom("福建","|福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德");
where[15] = new comefrom("江西","|南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶");
where[16] = new comefrom("山东","|济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽");
where[17] = new comefrom("河南","|郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源");
where[18] = new comefrom("湖北","|武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州");
where[19] = new comefrom("湖南","|长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界");
where[20] = new comefrom("广东","|广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮");
where[21] = new comefrom("广西","|南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池");
where[22] = new comefrom("海南","|海口|三亚");
where[23] = new comefrom("四川","|成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州");
where[24] = new comefrom("贵州","|贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南");
where[25] = new comefrom("云南","|昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧");
where[26] = new comefrom("西藏","|拉萨|日喀则|山南|林芝|昌都|阿里|那曲");
where[27] = new comefrom("陕西","|西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛");
where[28] = new comefrom("甘肃","|兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南");
where[29] = new comefrom("宁夏","|银川|石嘴山|吴忠|固原");
where[30] = new comefrom("青海","|西宁|海东|海南|海北|黄南|玉树|果洛|海西");
where[31] = new comefrom("新疆","|乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏");
where[32] = new comefrom("香港","");
where[33] = new comefrom("澳门","");
where[34] = new comefrom("台湾","|台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖");
where[35] = new comefrom("其它","|北美洲|南美洲|亚洲|非洲|欧洲|大洋洲");
function select() {
with(document.creator.province) { var loca2 = options[selectedIndex].value; }
for(i = 0;i < where.length;i ++) {
if (where[i].loca == loca2) {
loca3 = (where[i].locacity).split("|");
for(j = 0;j < loca3.length;j++) { with(document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4=options[selectedIndex].value;}}
break;
}}
document.creator.newlocation.value=loca2+loca4;
}
function init() {
with(document.creator.province) {
length = where.length;
for(k=0;k<where.length;k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
}
with(document.creator.city) {
loca3 = (where[0].locacity).split("|");
length = loca3.length;
for(l=0;l<length;l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
}}
-->
</script>
<body onload="init()">
<font color=#000000><b>来自：</b>
请输入您所在国家的具体地方。此项可选
省份 <select name="province" onChange = "select()"></select> 城市 <select name="city" onChange = "select()"> </select>
我在 <input type=text name="newlocation" maxlength=12 size=12 style="font-weight: bold"> 不能超过12个字符（6个汉字）
</form>
<form action="http://www.sharejs.com" method=post name="creator" enctype="multipart/form-data">
<script language="javascript">
<!--
var where = new Array(35);
function comefrom(loca,locacity) { this.loca = loca; this.locacity = locacity; }
where[0]= new comefrom("请选择省份名","请选择城市名");
where[1] = new comefrom("北京","|东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆");
where[2] = new comefrom("上海","|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明");
where[3] = new comefrom("天津","|和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县");
where[4] = new comefrom("重庆","|万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁|大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川");
where[5] = new comefrom("河北","|石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水");
where[6] = new comefrom("山西","|太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");
where[7] = new comefrom("内蒙古","|呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟");
where[8] = new comefrom("辽宁","|沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛");
where[9] = new comefrom("吉林","|长春|吉林|四平|辽源|通化|白山|松原|白城|延边");
where[10] = new comefrom("黑龙江","|哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭");
where[11] = new comefrom("江苏","|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安");
where[12] = new comefrom("浙江","|杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水");
where[13] = new comefrom("安徽","|合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州");
where[14] = new comefrom("福建","|福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德");
where[15] = new comefrom("江西","|南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶");
where[16] = new comefrom("山东","|济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽");
where[17] = new comefrom("河南","|郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源");
where[18] = new comefrom("湖北","|武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州");
where[19] = new comefrom("湖南","|长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界");
where[20] = new comefrom("广东","|广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮");
where[21] = new comefrom("广西","|南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池");
where[22] = new comefrom("海南","|海口|三亚");
where[23] = new comefrom("四川","|成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州");
where[24] = new comefrom("贵州","|贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南");
where[25] = new comefrom("云南","|昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧");
where[26] = new comefrom("西藏","|拉萨|日喀则|山南|林芝|昌都|阿里|那曲");
where[27] = new comefrom("陕西","|西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛");
where[28] = new comefrom("甘肃","|兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南");
where[29] = new comefrom("宁夏","|银川|石嘴山|吴忠|固原");
where[30] = new comefrom("青海","|西宁|海东|海南|海北|黄南|玉树|果洛|海西");
where[31] = new comefrom("新疆","|乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏");
where[32] = new comefrom("香港","");
where[33] = new comefrom("澳门","");
where[34] = new comefrom("台湾","|台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖");
where[35] = new comefrom("其它","|北美洲|南美洲|亚洲|非洲|欧洲|大洋洲");
function select() {
with(document.creator.province) { var loca2 = options[selectedIndex].value; }
for(i = 0;i < where.length;i ++) {
if (where[i].loca == loca2) {
loca3 = (where[i].locacity).split("|");
for(j = 0;j < loca3.length;j++) { with(document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4=options[selectedIndex].value;}}
break;
}}
document.creator.newlocation.value=loca2+loca4;
}
function init() {
with(document.creator.province) {
length = where.length;
for(k=0;k<where.length;k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
}
with(document.creator.city) {
loca3 = (where[0].locacity).split("|");
length = loca3.length;
for(l=0;l<length;l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
}}
-->
</script>
<body onload="init()">
<font color=#000000><b>来自：</b>
请输入您所在国家的具体地方。此项可选
省份 <select name="province" onChange = "select()"></select> 城市 <select name="city" onChange = "select()"> </select>
我在 <input type=text name="newlocation" maxlength=12 size=12 style="font-weight: bold"> 不能超过12个字符（6个汉字）
</form>
第4个回答 2012-04-28
我也来插一嘴：
用ajax的dwr实现应该也可以吧？
在页面初始化的时候就把省份填好，然后调用市，区的onclick事件，将这些输入放到select中
用ajax的dwr实现应该也可以吧？
在页面初始化的时候就把省份填好，然后调用市，区的onclick事件，将这些输入放到select中
ajax 省市区多级联动(在struts2中),有人能做出个简单的吗??
1.获取省份的列表值,有2种方式:一是返回List集合,在页面进行迭代;二是在业务类中将下拉列表封装好,页面通过JQuery方法写入。 这里暂时采用第二种方法。 2.前台JQuery:①数据库里面需要存的值,三者都有可能,三选一(判断是否选中了下面的级联项,按选中的最低级项为准值); ②将三个下拉框的name属性设置为变量,便...
相似回答
