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

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 = 0i <vList.lengthi ++) {

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 = 0i <vList.lengthi ++) {

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>

你这些个选项是写死的值，还是从数据库里面取到的？如果是写死的值的话，标准类别后面的select标签onChange事件上面绑定function，里面根据当前的选择项来改变二级分类的选项和状态，如果是从数据库里面取值，在onChange事件绑定的function里面用ajax来去后台查询相应的option。

---