Question

jsp做select下拉列表二级联动的，第一个select显示数据库里的字段名称，第二个显示对应字段的数据

主要就是做数据库查询的j，sp做select下拉列表二级联动的第一个select显示数据库里一个表的字段名称，第二个下拉列表存放选中的第一个下拉列表字段下的数据，然后再查询~~~~求怎么实现这样的效果？最好就是jsp+js做的~~~求大神来解答！
这么水~~~都几天了 居然没人会这样的！！！哎

Answer 1

JSP（njpb:paginationForm类似form，我这里用的框架里的组件）：
<njpb:paginationForm pager="${pager }" action="${contextPath }/oee_timecollect_timeCollect!findBeanList.action?tid=${tid}" onsubmit="return navTabSearch(this);">
<table class="searchContent">
<tr>
<td>事业部:</td>
<td>
<input id="parentId" type="text" value="${queryParameter['eqmanager.organization.parent.id']}" hidden="true">
<select class="select" id="parent" name="_query.eqmanager.organization.parent.id" onchange="getorganization()">
<option value="">请选择</option>
</select>
</td>
<td>镀膜巴:</td>
<td>
<input id="childId" type="text" value="${queryParameter['eqmanager.organization.id']}" hidden="true">
<select class="select" id="child" name="_query.eqmanager.organization.id">
<option value="">请选择</option>
</select>
</td>
<td><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></td>
</tr>
</table>
</njpb:paginationForm>
script：
<script type="text/javascript">
/*加载事业部下拉选项*/
$(function () {
var parentId = $('#parentId').val();
$.ajax({
type : "POST",
url : "${contextPath }/security_organization!findOrganization.action?tid=${tid}&bean.parent.id=1",
success: function (data) {
var dataStr = data.message;
if (dataStr != null && dataStr != "") {
var vList = dataStr.split("@");
if (vList != null && vList.length > 0) {
for (var i = 0; i < vList.length; i ++) {
var str = vList[i].split("&");
if(parentId == str[0]){
$('#parent').append("<option value='" + str[0] + "' selected='true'>" + str[1] + "</option>");
getorganization();
}else{
$('#parent').append("<option value='" + str[0] + "'>" + str[1] + "</option>");
}
}
}
}
},
dataType : "json",
error: function () {
alert("加载事业部失败");
}
});
});
/*加载镀膜巴下拉选项*/
function getorganization(){
var parent = $("#parent").val();
$("#child").empty();
var childId = $('#childId').val();
$.ajax({
type: "post",
url: "${contextPath }/security_organization!findOrganization.action?tid=${tid}&bean.parent.id="+parent,
success: function (data) {
$('#child').append("<option value='' selected='selected' >" + '请选择' + "</option>");
var dataStr = data.message;
if(dataStr != null && dataStr != ""){
var vList = dataStr.split("@");
if (vList != null && vList.length > 0) {
for (var i = 0; i < vList.length; i ++) {
var str = vList[i].split("&");
if(childId == str[0]){
$('#child').append("<option value='" + str[0] + "' selected='true'>" + str[1] + "</option>");
}else{
$('#child').append("<option value='" + str[0] + "' >" + str[1] + "</option>");
}
}
}
}
},
dataType : "json",
error: function () {
alert("加载镀膜巴失败");
}
});
}
</script>