jquery与AJAX实现二级联动实例(对中文处理比较好)

所谓二级联动,其实稍微懂点js的都不陌生,关于二级联动的实现,不使用JQ,而是原生态的JS些,效率会更好,但是个人感觉用JQ写的话,思路会清晰点。

代码:html部分

<select name=”” id=”province”>
<option>请选择</option>
<option value=1>广东</option>
<option value=2>湖南</option>
</select>
<select name=”” id=”city”>
<option>请选择</option>
</select>
JQ部分
<script type=”text/javascript”>
$(document).ready(function () {
$(“#province”).change(function () {
$.ajax({
type: “post”,
url: “Index/city?id=”+$(this).val(),
datatype: “json”,
success: function (data) {
var sm = eval(data);
var str='<option>请选择</option>';
for(i=0;i<sm.length;i++){
str+='<option value=’+sm[i].id+’>’+sm[i].name+'</option>';
}
$(“#city”).html(str);
}
});
});
});
</script>

选择省份后,将省份的ID传递给city页面,然后从数据库中查询到该省份下面所有的城市,然后返回JSON数据(data),例如选择广东后,返回的JSON数据格式为:

[{“id”:”3″,”pid”:”1″,”name”:”\u5e7f\u5dde”,”ename”:”guangzhou”},{“id”:”4″,”pid”:”1″,”name”:”\u6df1\u5733″,”ename”:”shenz”},{“id”:”5″,”pid”:”1″,”name”:”\u4e2d\u5c71″,”ename”:”www.111cn.net”}]

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索实例
, 效率
代码
jquery ajax二级联动、jquery ajax三级联动、jquery ajax下拉联动、jquery ajax省市联动、jquery ajax 联动,以便于您获取更多的相关知识。

时间: 2024-09-15 17:23:31

jquery与AJAX实现二级联动实例(对中文处理比较好)的相关文章

Spring MVC中Ajax实现二级联动的简单实例_jquery

今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

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

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

ajax +php 二级联动菜单代码

ajax +php 二级联动菜单代码 <script language="javascript" > var http_request=false;   function send_request(url){//初始化,指定处理函数,发送请求的函数     http_request=false;  //开始初始化XMLHttpRequest对象  if(window.XMLHttpRequest){//Mozilla浏览器   http_request=new XMLHtt

action-求一个用struct2标签和ajax实现二级联动例子!!

问题描述 求一个用struct2标签和ajax实现二级联动例子!! 1C 要能实现的,数据从action里来,从数据库来的资源可以模拟...求一个能用的例子 解决方案 http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.html

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

本文实例讲述了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使用$.ajax进行即时验证实例详解_jquery

本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTY

Laravel+jQuery实现AJAX分页效果_php实例

本文实例讲述了Laravel+jQuery实现AJAX分页效果.分享给大家供大家参考,具体如下: JavaScript部分: //_______________________ // listener to the [select from existing photos] button $('#photosModal').on('shown.bs.modal', function () { // get the first page of photos (paginated) getPhoto

JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧

javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串   xmlhttpRequest.responseText; (6).获取服务端返回的值,以xml对象的形式存储  xmlhttpRequest.responseXML; (7).使用W3C

jquery中ajax跨域方法实例分析_jquery

本文实例分析了jquery中ajax跨域.分享给大家供大家参考,具体如下: JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 方法一: jsonp之 getJSON js var url = "http://localhost/mytest/jsonp_php.php?callback=?"; $.getJSON(url, { "age": 21, "name