jsp二级联动

jsp二级联动,第1张

感觉你这样设计表增加了复杂度,一级都重复了。建议这样:

id   pid  menuname

1    0    数据管理

2    1    添加数据

3    1    数据列表

4    0    日志管理

5    4    客户日志

6    4    用户日志

pid表示上级下拉框的id。默认0表示顶级。

二级联动效果应该要用js来实现,可以用ajax,也可以一次性将数据库全读出来完全用js实现。

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/6704501.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-27
下一篇 2023-03-27

发表评论

登录后才能评论

评论列表(0条)

保存