ajax级联下拉列表框

ajax请求回json对象填入下拉框

多说无益代码如下

$(function(){
$.ajax({
url:"http://localhost:8080/nutz/user/xx",
dataType:"json",
success:function(data){
var d= data;
for(var i=0;i<d.length;i++){
var t=‘<option value=‘+d[i].id+‘>‘+d[i].provincename+‘</option>‘;
//设置value的值和 列表参数
var $ts=$(t);
$("#sel").append($ts);
}
},
error:function(){
alert("+_+");
}
});
//获取参数
$("#sel").change(function(){
var pro=$(this).val();
city(pro);
});
});
function city(pro){
$("#city").empty();
$("#city").prepend("<option value=‘0‘>请选择城市</option>");
$("#districts").empty();
$("#districts").prepend("<option value=‘0‘>请选择地区</option>");
$.ajax({
url:"http://localhost:8080/nutz/user/city",
data:{"pid":pro},
dataType:"json",
success:function(data){

var d= data;
for(var i=0;i<d.length;i++){
var tt=‘<option value=‘+d[i].id+‘>‘+d[i].cityname+‘</option>‘;
//设置value的值和 列表参数
var $ts=$(tt);
$("#city").append($ts);
}  
},
error:function(){
alert("+_+");
}
});
//获取参数
$("#city").change(function(){
var cit=$(this).val();
districts(cit) ;
});
}

function districts(cit){
$("#districts").empty();
$("#districts").prepend("<option value=‘0‘>请选择地区</option>");
$.ajax({
url:"http://localhost:8080/nutz/user/districts",
data:{"cid":cit},
dataType:"json",
success:function(data){
var d= data;
for(var i=0;i<d.length;i++){
var tt=‘<option value=‘+d[i].id+‘>‘+d[i].districtname+‘</option>‘;
//设置value的值和 列表参数
var $ts=$(tt);
$("#districts").append($ts);
}
},
error:function(){
alert("+_+");
}
});
}
</script>
</head>
<body>
<div>
<select id="sel" width="180">
<option value="0">请选择省份</option>

</select>
<select id="city"width="180">
<option value="0">请选择城市</option>
</select>
<select id="districts" width="180">
<option value="0">请选择地区</option>
</select>
</div>
</body>
</html>

时间: 2024-11-10 12:18:51

ajax级联下拉列表框的相关文章

现在通过json和gson来实现完成一个级联下拉列表框

现在通过json和gson来实现完成一个级联下拉列表框(例如:省市联动) 1.前台jsp页面: <select name="address.upLeverId" id="Townside1"> <span style="white-space:pre"> </span><option value="-1">请选择</option> <s:iterator val

struts2 级联下拉列表框 简单的

废话不说,先上效果图 jap代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="s" uri="/struts-tags"%> 4 <!DOCTYPE html PUBLIC "-//W3C

完整中英文世界国家级联下拉列表插件【前端版】

这个小东西是之前小项目上临时增加功能的产物,那时候在网上找了很久都没有能用的插件,要么是数据残缺少得可怜,还有就是实现手段非常低效不可维护那种,各种奇拔问题!反正就没有逞心如意!那时候又急需要这样一个功能,百般无奈后灵机一动,想起某企鹅功能选项不是有这样的世界国家级联功能嚒!那肯定有地方存着这数据的哇!嘿嘿!心里突然暗喜,终于有方向,然后就是向这企鹅开刀找!在某个i18n国际化文件夹中找到了!立马放下心头大石!   这样子中英文版本的数据都有了!但是问题又来了!该怎么开始做呢? 怎么去调用这个数

第三十五节(java-动态加载级联菜单)

CityMapjava 文件里: package com.tanzhou.util; import java.util.LinkedHashMap; import java.util.Map; import javax.tools.JavaCompiler; /** * 城市数据的组织类 * @author Ming * @version 1.0 * 2015-2-7 * */ public class CityMap implements java.io.Serializable{ /** *

prototype中的ajax异步加载

jquery前台处理: var param = {a:a}; $.post("*.do",param,function(data) { var columHtml = ""; $.each(data, function(i, item) { columHtml = columHtml + "<option value='"+item[0]+"'>"+item[1]+"</option>&quo

Spring day04笔记(SVN讲解和回顾昨天知识)

spring day03回顾 事务管理 基于xml配置 1.配置事务管理器 jdbc:DataSourceTransactionManager hibernate:HibernateTransactionManager 2.事务通知(详情.属性) <tx:advice id="" transaction-manager=""> <tx:attributes> <tx:method name="add*"> &l

客户端用JavaScript填充DropDownList控件 服务器端读不到值

填充没有任何问题,但是在服务器端却取不出来下拉表中的内容.页面代码如下. <form id="form1" runat="server"> <div> <h3>看看用js填充的dropdownlist控件在服务器端能读出来吗?</h3> 三个级联下拉列表框: <asp:DropDownList runat="server" id="bigTypeList" Width=&q

ajax实现级联下拉菜单

ajax实现级联下拉菜单非常简单,下面是一个用ajax实现的省市级联的下拉菜单: jsp中在<select>中添加onchange事件,触发该事件调用实现ajax的js: <div> <form action="Pcs" method="post"> 所在省:<select name="pro" id="pro" onchange="chCity();"> &

jQuery+Ajax+Jsp做二级级联

终于弄懂了这个级联,我去!必须得在博客记下来. 1, JS代码: 1 $(document).ready(function(){ 2 $("#select1").change(function(){ 3 adjustCountyDropDown(); 4 }); 5 }); 6 7 function adjustCountyDropDown(){ 8 var selectedCity= $("#select1").val(); 9 var county= $(&qu