Question

使用struts 《s:select > 如何通过jQuery实现三级的级联

部分代码如下：
<tr>
<td > 部门:</td><td>
<input id="depID_none" type="text" readonly="readonly" style="display: none;" />
<s:select id="depID" list="tperlist" listValue="id.bmmc" listKey="id.bmid" theme="simple"></s:select>

</td>
</tr>
<tr>
<td >岗位:</td><td>
<input id="jobID_none" type="text" readonly="readonly" style="display: none;" />
<s:select id="jobID" list="tperlist" listValue="id.gwmc" listKey="id.gwid" theme="simple"></s:select>

</td>
</tr>
<tr>
<td >
姓名:</td><td>
<input id="xm_none" type="text" readonly="readonly" style="display: none;" />
<LABEL><s:select id="xm" list="tperlist" listValue="id.xm" listKey="id.ryid" theme="simple"></s:select></LABEL>
</td>
</tr>

Answer 1

<!-- 徐士刚jquery实现异步三级联动 -->
<script type="text/javascript">
var flagflag = false;
$(function(){
$.post("dropdownlist!selectAllProvinceCityTown.action",function(data){
var json=eval(data);
for(var i = 0,len = json.length; i<len; i++){
if(${provinceid}==json[i].id){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#provinceid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querycitybyprovince();

}

else
{
$('#provinceid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}
},"json");

$('#provinceid').change(function(){
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querycitybyprovince();
});
});
function querycitybyprovince()
{
var provinceid = document.getElementById('provinceid').value;
if(provinceid==1)
{
provinceid = -1;
}
$.post("dropdownlist!selectAllProvinceCityTown.action",{provinceid:provinceid},function(data){

var json=eval(data);

for(var i = 0,len = json.length; i<len; i++){
if(${cityid}==json[i].id){
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#cityid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querytownbycity();

}
else{
$('#cityid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

$('#cityid').change(function(){
//clearOptions(document.getElementById('townid'));
//$('#townid').empty();
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querytownbycity();
},"json");
});
}

function querytownbycity()
{

var cityid = document.getElementById('cityid').value
$.post("dropdownlist!selectAllProvinceCityTown.action",{cityid:cityid},function(data){

var json=eval(data);
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
for(var i = 0,len = json.length; i<len; i++){
if(${townid}==json[i].id){
$('#townid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
}
else{
$('#townid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));
}
}

},"json");
}

页面端：
<select name="provinceid" class="bk_01" id="provinceid"
style="WIDTH: 120px">
<option value="1">
---请选择---
</option>
</select>
<select name="cityid" class="bk_01" id="cityid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
<select name="townid" class="bk_01" id="townid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
希望对你有帮助，希望及时采纳，谢谢！

追问

徐先生你好：
我的html部分是这样写的：
就是用struts2的标签可以自动取值，想在前台实现级联而非通过ajax访问后台，请问您有没什么好办法？

追答

就是说跳转到页面的时候 部门，姓名什么的都查出来了，你选择一个部门，把这个部门下的所有姓名展示出来？

追问

部门-岗位-人员 三级的，选择部门级联改变岗位和人员，选择岗位改变人员

追答

方法1：选择部门1后触发js方法---》js方法里面判断如果是部门1就$(此处是岗位id).val(此处是岗位值) ，让部门1的岗位选中，依次类推。
方法2：选择部门1后触发js方法---》$('#provinceid').append($(""+json[i].name+""));这种形式，因为属于一个部门的不止有一个岗位，手动往里添加，以此类推，三个框有一个变化了就empty，之后再次添加。这样防止了重复添加。

追问

谢谢你，想给你20分，但是我的财富值过低，给不了分，抱歉