jquery+json实现数据二级联动的方法

本文实例讲述了jquery+json实现数据二级联动的方法。分享给大家供大家参考，具体如下：

function GetCityInfo1()
{
  $("#ddlCITY1").empty();
  //$("#ddlCOUNTY").empty();
  var strId = $("#ddlPROVINCE1").attr("value");
  $('#HiddenPro').val(strId);
  $.get("../ashx/GetCityInfo.ashx",{ProID:strId,date:new Date().getTime(),proType:"getCity"},function(result)
  {
   $("#ddlCITY1").append($("<option></option>").val("0").html("--请选择城市--"));
   var datas=eval(result);
   for(var j in datas)
   {
    $("#ddlCITY1").append($("<option></option>").val(datas[j].ccode).html(datas[j].cityname));
   }
    //获取区的信息
    //GetCountryInfo();
   });
}

后台代码:

if (context.Request.QueryString["ProID"] != null && context.Request.QueryString["proType"] != null)
{
  string pcode = Convert.ToString(context.Request.QueryString.GetValues("ProID")[0]);
  string strSQL = "select cityname,ccode from CD_CityInfo where pcode='" + pcode + "' ";
  //执行T-SQL语句 返回DataTable
  DataTable dt = Snell.SnCode.DataBase.SQLServerHelper.Query(strSQL).Tables[0];
  StringBuilder sb = new StringBuilder();
  sb.Append(CreateJsonParameters(dt));
  //根据省份编号获取信息 获取信息
  if (sb.Length > 0)
  {
   context.Response.ClearContent();
   context.Response.ContentEncoding = System.Text.Encoding.UTF8;
   context.Response.Write(sb.ToString());
   context.Response.End();
  }
}
#region 根据Datatable的数据结构转换成json数据
public string CreateJsonParameters(DataTable dt)
{
 System.Text.StringBuilder sb = new System.Text.StringBuilder();
 if (dt != null && dt.Rows.Count > 0)
 {
  sb.Append("[");
  for (int i = 0; i < dt.Rows.Count; i++)
  {
   sb.Append("{");
   for (int j = 0; j < dt.Columns.Count; j++)
   {
    //如果值不是最后一个则添加逗号分隔
    if (j < dt.Columns.Count - 1)
    {
     sb.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
    }
    //如果值为最后个字符则不添加逗号
    else if (j == dt.Columns.Count - 1)
    {
     sb.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
    }
   }
   //如果为最后一个值的话 则不添加逗号
   if (i == dt.Rows.Count - 1)
   {
    sb.Append("}");
   }
   else
   {
    sb.Append("},");
   }
  }
  sb.Append("]");
  return sb.ToString();
 }
 else { return null; }
}
#endregion

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于jquery的二级联动菜单实现代码

    jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 几种二级联动案例（jQuery\Array\Ajax php）

    在开发过程中,遇到过非常多的二级联动,下面是我总结出来的几种二级联动案例 二级联动(1)  第一种案例是一种比较简单的二级联动,利用jquery的显示隐藏来实现,对于数据较少的二级联动来说可以采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二级联动</title> /*引入jquery文件*/ <script type=&quo

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级

  • jQuery 下拉列表 二级联动插件分享

    jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果,使用方法: 配置js: 复制代码 代码如下: var defaults = { NextSelId: '#Select2', SelTextId: '#Text1', Separator: '--', SelStrSet: [ { name: '请选择', subname: '请选择'}, { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' }, { name: '★高起专★

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <lab

  • 基于jquery实现二级联动效果

    本文实例为大家分享了jquery实现二级联动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js&

  • jQuery+JSON实现AJAX二级联动实例分析

    本文实例讲述了jQuery+JSON实现AJAX二级联动的方法.分享给大家供大家参考,具体如下: 后台Handler.ashx <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common();

  • jquery+json实现数据二级联动的方法

    本文实例讲述了jquery+json实现数据二级联动的方法.分享给大家供大家参考,具体如下: function GetCityInfo1() { $("#ddlCITY1").empty(); //$("#ddlCOUNTY").empty(); var strId = $("#ddlPROVINCE1").attr("value"); $('#HiddenPro').val(strId); $.get("../as

  • Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1.首先在jsp页面的JavaScript,这段代码是通用的,所以把他放在函数外面,可以供其他的函数共同使用 var xhr=false; //创建XMLHttpRequst对象 if(window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else

  • jquery mobile界面数据刷新的实现方法

    JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作. 为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作. 各类标签的刷新 1.Textarea fields $('body').prepe

  • 遍历json获得数据的几种方法小结

    Json在Web开发的用处非常广泛,作为数据传递的载体,如何解析Json返回的数据是非常常用的.下面介绍下四种解析Json的方式: Part 1 var list1 = [1,3,4]; alert(list1[1]); var list2 = [{"name":"leamiko","xing":"lin"}]; alert(list2[0]["xing"]) alert(list2[0].xing) Pa

  • C#实现json格式数据解析功能的方法详解

    本文实例讲述了C#实现json格式数据解析功能的方法.分享给大家供大家参考,具体如下: 来写写json的解析吧 首先添加web引用 System.Web.Extensions 路径 c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\v3.5\System.Web.Extensions.dll 接下来就是两个函数了,一个是根据key来获取,一个是根据index来获取 public static bool GetValue

  • React实现二级联动的方法

    React实现二级联动的方法

    本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下 实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明 大体思路就是把数据接口从页面传给组件,交互在组件内执行后,通过onTimeChange将选择的数据结果返回给页面,然后展示到页面上. 我用Taro写的,语法和react一样. 小程序效果 好久以前的一个方法,给大家发下实现代码: 1.页面里有一个选择时间的弹框模块 {this.state.isToggleOn && ( <Pa

  • jquery+json实现数据列表分页示例代码

    该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:

  • jquery基于layui实现二级联动下拉选择(省份城市选择)

    jquery基于layui实现二级联动下拉选择(省份城市选择)

    先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-filter=&q

  • 用户管理的设计_jquery的ajax实现二级联动效果

    用户管理的设计_jquery的ajax实现二级联动效果

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID

随机推荐