ajax实现动态下拉框示例
许多页面上都涉及有下拉框，即select标签。对于简单的下拉框，被选择的数据是不需要改变的，我们可以用<option></option>写死。这样下拉框的数据永远都是那几条。
示例：
<select> <option>信息一</option> <option>信息二</option> <option>信息三</option> <option>信息四</option> </select>
但是有些项目或者工程是需要将数据库中的数据呈现出来并提供选择的，下拉的内容会随数据库中数据的变化而变化。首先我们有asp组件可以帮我们做这这件事情，DropDownList组件，只需要将数据库中查询得到的数据添加进该组件中，在前台即可以显示出动态下拉的效果。如果想更有新意，不依赖于传统组件，ajax就是个不错的选择。下面一步步来通过ajax实现动态下拉的效果。
1.js发出ajax请求：
$(document).ready(function () {
$.ajax({
timeout: 3000,
async: false,
type: "POST",
url: "WareHouse.ashx",
dataType: "json",
data: {
warehouse: $("#issued_sub_key_c").val(),
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
$("#issued_sub_key_c").append("<option>" + data[i].Name + "</option>");
}
}
});
});
ajax请求WareHouse.ashx（一般处理程序）来获得数据，请求成功后将返回的json数据附加到id为issued_sub_key_c的select标签。值得注意的是这里将async的属性改为了false，async的默认状态为true，即为异步。值改为false就是同步了。但是当async为false的时候，ajax请求完数据之前，浏览器一直处于锁死状态，这样会让使用者认为程序崩溃了，所以就人为的添加了一个超时（timeout），这样就不会出现程序崩溃的假象。回到话题开始，为什么要将async改为false呢？原因就是当ajax是异步请求的时候进入到页面后出现下拉框数据还未同步，下拉框是空白数据（可以自己体验体验）。所以我们需要利用同步的特性并配合超时来完成下拉框的数据同步。
2.一般处理程序：从数据库返回的数据是List<string>类型，我们需要自己定义一个toJson()方法将list转化为json数据，然后返回json数据。
public string toJson(List<string> str)
{
StringBuilder json = new StringBuilder();
if (str == null)
{
return "null";
}
json.Append("[");
foreach (var item in str)
{
json.Append("{\"Name\":\"");
json.Append(item);
json.Append("\"},");
}
return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";
}
/*得到并关联仓库(select标签)*/
public void ProcessRequest(HttpContext context)
{
SubinventoryDC subinventorydc = new SubinventoryDC();
List<string> list = new List<string>();
list = subinventorydc.getAllSubinventory();
string json = toJson(list);
context.Response.ContentType = "text/plain";
context.Response.Write(json);
}
3.前台页面：前台只需要定义一个id为issued_sub_key_c的select标签。注意select标签须得有一个name，后台正是通过name来取得选中数据的值。取值方法：Request.Form["issued_sub_key_c"]。
<select id="issued_sub_key_c" name="issued_sub_key_c"> </select>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法
这篇文章主要介绍了实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法的相关资料,需要的朋友可以参考下2016-07-07
获取时间的方法及常用时间类都是大家经常使用的，在本文为大家整理了一些，个人感觉还比较全，感兴趣的朋友可以收集下2013-10-10
现在讲一下几个比较经典，而且比较常用的 jQuery 技巧，相信你能举一反三。2010-03-03
jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。接下来通过本文给大家分享jQuery.Sumoselect插件实现下拉复选框效果，需要的朋友参考下吧2017-11-11
风雲初次编写插件，望高手指点，基于jquery的checkbox下拉框插件2010-06-06
这篇文章主要介绍了使用jQuery实现掷骰子游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文主要介绍了jquery正整数数字校验正则表达式的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
jquery 在使用ajax过程中出现调用失败的情况，想必大家都有遇到过吧，在本文有个不错的示例，希望对大家有所帮助2013-09-09
很久没写东西，年前的项目也接近尾声，最近在网上看到一篇文章是 阮一峰 的 《jQuery最佳实践》 链接在文末2012-03-03
下面小编就为大家分享一篇select获取下拉框的值 下拉框默认选中方法，具有很好的参考价值，希望对的有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论