jquery ajax 实现城市二级联动下拉效果

jquery代码

 代码如下 复制代码

$(document).ready(function(){
   $("#house_city").change(function(){
     var val=$(this).val();
 $.post("/ajax/city_ajax",{id:val},function(data){
 $("#house_area").html(data);
   })
});

html代码

 

 代码如下 复制代码

<li><span class="name"><b>*</b>意向城市：</span>

<select name="yxcs" class="city" id="house_city">
<option value='0'>请选择</option>
<option value="1">苏州</option>
<option value="2">南通</option>
<option value="3">常州</option>
<option value="4">南京</option>
<option value="5">无锡</option>
<option value="6">徐州</option>
<option value="7">金华</option>
<option value="8">宿迁</option>
<option value="9">重庆</option>
<option value="10">福州</option>
<option value="11">长沙</option>
<option value="12">成都</option>
<option value="13">贵阳</option>
<option value="14">昆明</option>
<option value="15">青岛</option>
<option value="16">南昌</option>
<option value="17">九江</option>
<option value="18">赣州</option>
<option value="19">大连</option>
<option value="20">大同</option>
<option value="21">温州</option>
<option value="22">杭州</option>
<option value="23">宁波</option>
<option value="24">武汉</option>
<option value="25">西安</option>
<option value="26">合肥</option>
<option value="27">长春</option>
<option value="28">哈尔滨</option>
<option value="29">乌鲁木齐</option>
<option value="51">沈阳</option>
<option value="52">上海</option>
<option value="53">济南</option>
</select>
<select name="yxqy" class="city" id="house_area">
<option value='0'>请选择</option>
</select></li>

php文件操作简单

只要查询数据库然后返回<option value="1">天心区</option>即可了。

时间： 2024-10-03 15:45:29

jquery ajax 实现城市二级联动下拉效果的相关文章

javascript中ajax二级联动下拉效果实例

先来普通一下query ajax参数 data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQuery 将自动为不同值对应同一个名称.如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'. 示例:  代码如下 复制代码 $.ajax({    type: &quo

ajax+php无刷新二级联动下拉菜单(省市联动)源码

ajax.js /** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow <arcow@126.com> * @version 1.0 * @lastupdate 2005-12-29 * */ var http_request = false; function send_request(url,method) {//初始化.指定处理函数.发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(win

ajax读取数据库内容实现二级联动下拉选择菜单示例

本文为大家介绍下使用ajax技术读取数据库内容并生成二级联动下拉选择菜单,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助   复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码 ----------------------

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

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

js实现的全国省市二级联动下拉选择菜单完整实例_javascript技巧

本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

基于javascript实现全国省市二级联动下拉选择菜单_javascript技巧

本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图:   具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"

PHP地区二级联动下拉菜单代码

<?php header('Content-Type: application/json; charset=utf-8'); echo 'province=[];'; foreach ($arrProvinces as $province) { echo 'province.push(['.$province['ProvinceID'].',"'.$province['ProvinceName'].'"]);'; } echo 'city=[];'; foreach ($arrC

jquery实现简单的二级导航下拉菜单效果_jquery

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl

最简单js代码实现select二级联动下拉菜单_javascript技巧

本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.