前台页面
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>根据班级获取学员下拉框数据</title> <script type="text/javascript" > //1.页面加载完毕后创建异步对象 请求班级数据 window.onload = function () { //1.1创建异步对象 var xhr = new XMLHttpRequest(); //1.2设置参数 xhr.open("get", "GetData.ashx?type=1", true); //1.3设置不使用浏览器缓存 xhr.setRequestHeader("If-Modified-Since", "0"); //1.4设置回调函数 xhr.onreadystatechange = function () { //当完全接收完响应报文后,并且 响应状态码为200的时候 if (xhr.readyState == 4 && xhr.status == 200) { //[{'id':'1','name':'1班'},{'id':'2','name':'2班'},{'id':'3','name':'3班'}] var res = xhr.responseText;//获取响应报文体内容 //===============将数据转成js数组============ //var resJson = eval(res);//第一种转换方法 //标准json格式[{"id":"1","name":"1班"},{"id":"2","name":"2班"}] //将 接收到的 json字符串 转换成 json对象 //注意:json其实是一种 数据传输的 格式(json格式满足js字面量表示法语法) 浏览器和服务器端 实际 不存在 所谓的 json 对象 其实就是js对象 var jsonArr = JSON.parse(res);//第二种转换方法 注意:用这种格式转换的时候属性名必须用双引号 loadSel("selClass", jsonArr, "id", "name"); //======================================== //alert(resJson2.length); //document.getElementById("selClass").innerHTML = res; } } //1.5发送异步请求 xhr.send(null); }; /* 生成下拉框选项 */ function loadSel(selId, dataArr, valueField, textField) { //根据id获取下拉框 var selObj = document.getElementById(selId); //清空下拉框选项 selObj.options.length = 0; //遍历数据数组 for (var i = 0; i < dataArr.length; i++) { //取出数据元素 var item = dataArr[i]; //item.id item.name方式来访问 或者item["id"] item["name"] 来访问 //创建 下拉框选项 对象 var opt = new Option(item[textField], item[valueField]); //添加到下拉框中 selObj.options.add(opt); } } </script> </head> <body> <center id="centerCon"> 班级:<select id="selClass"><option>哇哈哈哈</option></select> 学生:<select id="selStu"></select> </center> </body>
本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/aspx/
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数据
, 对象
, item
, 异步加载获取数放数组
, textfield 响应
, name
, var
, 下拉
, 获取对象的id
, 接收json参数
, js数组转json
根据name
下拉框获取数据库数据、下拉框获取数据库的值、select下拉框获取数据、下拉框获取数据、easyui下拉框获取数据,以便于您获取更多的相关知识。
时间: 2024-08-31 06:58:51