ajax实现动态下拉框示例


Posted in Javascript onJanuary 10, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
AJAX架构之Dojo篇
Apr 10 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 #Javascript
jQuery验证表单格式的使用方法
Jan 10 #Javascript
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
You might like
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python 内置函数filter
2017/06/01 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
简单了解django orm中介模型
2019/07/30 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
应届大学生求职信
2013/12/01 职场文书
公司活动方案范文
2014/03/06 职场文书
2014全国两会心得体会
2014/03/17 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
MySQL常见优化方案汇总
2022/01/18 MySQL
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS