ajax实现动态下拉框示例

站长资源 2024/11/26 佚名

2 0 1

许多页面上都涉及有下拉框，即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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

ajax动态下拉框,ajax动态生成下拉框,ajax,下拉框

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“ajax实现动态下拉框示例”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

ajax实现动态下拉框示例

微信JSAPI支付操作需要注意的细节

JavaScript三种绑定事件方式及相互之间的区别分析

评论“ajax实现动态下拉框示例”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接