怎样用js实现数据库绑定到下拉框

怎样用js实现数据库绑定到下拉框,第1张

需要先用ajax的方式获取数据库的记录 作为数组 然后 将数组内容加入的下拉框中作为选项

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>

<script>

$(document).ready(funxtion{

    vat list1=$("#test")//获取list对象

    $.get("demo_ajax_load.txt", function(result){ //获取后台数据库记录

    for(var i=0,len=result.row.lengthi<result.rowi++){  // result为返回的json对象row为包含选项的数组

        var o=new Option(result.row[i].text,result.row[i].value)

        list1.appendChild(o)

    }

  },"json")

})

</script>

</head>

<body>

<select id="test">

    <option>1</option>

</select>

</body>

//checkbox值

var aa = ''

$("input[name='checkbox']:checkbox:checked").each(function(){

aa+=$(this).val()

})

//select值

$('#testSelect option:selected').text()

或者是value

$("#testSelect").val()

//根据部门编号选项相对应的组

function showdept(val){

if(val==-1){

return

}

var request = false

if(window.ActiveXObject){

try {

request = new ActiveXObject("Msxml2","XMLHTTP")

} catch (e) {

try {

request = new ActiveXObject("Microsoft","XMLHTTP")

} catch (e) {

}

}

}

if(!request){

request = new XMLHttpRequest()

}

request.onreadystatechange = function(){

if(request.readyState==4){

if(request.status==200){

var optSel= document.getElementById("group")

optSel.options.length = 0

optSel.options[0] = new Option("---请选所属组---","-1")

var res =request.responseText

var arr = res.split(",")

for(var i=0i<arr.length-1i++){

var data = arr[i].split("_")

optSel.options[i+1] = new Option(data[1],data[0])

}

}

}

}

//打开请求

var url = "struts/oaGroup/OaGp_queryGroup.action?deptNumber="+val

request.open("GET",url,true)

//发送

request.send(null)

}

//根据组编号查询职务

function showGroup(val){

if(val==-1){

return

}

var request = false

if(window.ActiveXObject){

try {

request = new ActiveXObject("Msxml2","XMLHTTP")

} catch (e) {

try {

request = new ActiveXObject("Microsoft","XMLHTTP")

} catch (e) {

}

}

}

if(!request){

request = new XMLHttpRequest()

}

request.onreadystatechange = function(){

if(request.readyState==4){

if(request.status==200){

var optSel= document.getElementById("role")

optSel.options.length = 0

optSel.options[0] = new Option("---请选择职务---","-1")

var res =request.responseText

var arr = res.split(",")

for(var i=0i<arr.length-1i++){

var data = arr[i].split("_")

optSel.options[i+1] = new Option(data[1],data[0])

}

}

}

}

//打开请求

var url = "struts/oaRole/Oarole_queryRole.action?groupUnmber="+val

request.open("GET",url,true)

//发送

request.send(null)

}

<tr>

<td align="right">所属部门:</td>

<td>

<select name="oaEmp.oaDept.deptNumber" id="department" onchange="showdept(this.value)" >

<option value="-1">---请选择部门---</option>

<c:forEach var="dt" items="${sessionScope.dept}">

<option value="${dt.deptNumber }">${ dt.deptName}</option>

</c:forEach>

</select>

</td>

<td>

<div id="departmentTip">

<font color="red">(必选项)</font>

</div>

</td>

</tr>

<tr>

<td align="right">所属组:</td>

<td>

<select name="oaEmp.oaGroup.groupUnmber" id="group" onchange="showGroup(this.value)">

<option value="-1">---请选所属组---</option>

</select>

</td>

<td>

<font color="red">(必选项)</font>

</td>

</tr>

<tr>

<td align="right">职位角色:</td>

<td>

<select name="oaEmp.oaRole.roleUnmber" id="role">

<option value="-1">---请选择职务---</option>

</select>

</td>

<td>

<font color="red">(必选项)</font>

</td>

你可以根据这个改哈这是三级联动菜单从数据库读取信息

</tr>


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

原文地址: https://outofmemory.cn/sjk/9891553.html

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

发表评论

登录后才能评论

评论列表(0条)

保存