【工作笔记0002】(ajax)多个select标签异步取值刷新
来源:互联网 发布:剑灵优化 编辑:程序博客网 时间:2024/05/22 10:23
需求:点击其中一个select的option,另一个select中呈现被查询出的数据结果。例如:
实现:运用JavaScript + ajax + json遍历实现异步刷新。
步骤:
1.绑定js函数到select的onclick属性中。例如:
<select name="parent1" id="parent1" size="7" style="height:200px;width:20%" onclick="parent1_SelectedIndexChanged();"> <option value="9">设备回收</option> <option value="10">设备出售</option> </select>2.编写js函数。例如:
function parent1_SelectedIndexChanged() {
$('#parent3').empty();
var obj = document.getElementById("parent1");
var index = obj.selectedIndex;
var val = obj.options[index].value;
$.ajax({
type: "GET",
url: "/siteadmin/productsys/add.aspx?act=search&id=" + val,
dataType: "json",
success: function(data) {
$('#parent2').empty(); //清空第二个select标签的option选项
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i].ID + '">' + data[i].ClassName + '</option>';//遍历后台返回的序列化后的json数据集合
}
$('#parent2').html(html);
},
error: function(msg) {
alert("查询失败!");
}
});
}
3.编写后台查询函数。注意在得到查询结果集合(一般为model或者datatable对象)后,需要调用相关的序列化函数(不同编程语言调用方法略微不同,但函数名称基本都为Serialize)将其序列化,最后调用Response.Write(str);Response.End();方法将字符串写入http输出流并发送到客户端浏览器。
这里注意不同的MVC框架对序列化的处理不同,此处列出的是.net3.5类库下asp.net开发用例。
- 【工作笔记0002】(ajax)多个select标签异步取值刷新
- 更改select标签实现无刷新动态取值
- ajax异步刷新,通过js取值一直为空
- HTML <select>标签取值
- javaScript操作select标签,select取值
- AJAX异步取值问题
- 用select下拉菜单来实现Ajax异步刷新
- ajax+jsp异步无刷新从DB取数据
- ajax异步获取数据,动态添加select标签中的option
- AJAX学习笔记之 处理多个异步请求
- struts2 <s: select 标签取值
- Ajax实现异步刷新多选联动
- Ajax同步、异步、异步刷新
- jquery-ajax(异步刷新)
- ajax 异步刷新实例
- ajax异步刷新
- AJAX实现异步刷新
- ajax异步请求刷新
- Linux之下MySQL安装的三种方案的比较
- PHP中VC6、VC9、TS、NTS版本的区别与用法详解
- mysql故障~Got fatal error 1236 解决方法
- 做自己好难
- 使用html5的canvas实现大转盘抽奖
- 【工作笔记0002】(ajax)多个select标签异步取值刷新
- 百度echarts柱状图
- LDAP
- java中的File.separator
- 【译】VisionMobile:了解物联网,你需要了解Zenefits
- 容器list使用之erase
- RaspberryPi 树莓派启动报错 mmcblk0: error -110 解决方法
- vs2008+stlport下编译boost1_47_0 64位
- MySQL创建Function时报的1418错误代号解决办法