刚开始学jquery,试着用jquery做了一个小例子:省市的二级联动。
在数据库test中建表province和city。province有字段id和name。city表中字段是id,city_name和province_id。
view部分代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//get provinces
$.get("getcontent.php", {category:'province'},
function(data) {
$('#province').html(data);
});
//get citys
$.get("getcontent.php", {category:'city'},
function(data) {
$('#city').html(data);
});
//province onchange
$('#province').change(function() {
var province = $(this).val();
$.get("getcontent.php", {category:'city', province:province}, function(data) {
$('#city').html(data);
});
});
});
</script>
<title>二级联动示例</title>
</head>
<body>
<form>
地址:
<select name="province" id="province">
<option>选择省份</option>
</select>
<select name="city" id="city">
<option value='0'>选择城市</option>
</select>
</form>
</body>
</html>
php部分:
<?php
define(HOST, 'localhost');
define(USER, 'root');
define(PW, '');
define(DB, 'test');
$connect = mysql_connect(HOST, USER, PW)
or die('Could not connect to mysql server');
mysql_select_db(DB,$connect)
or die('Could not select database.');
//设置查询编码,不设查询时易出现乱码
mysql_query('set names utf8;');
switch($_REQUEST['category']) {
//显示数据库中所有省份
case 'province':
$str = "<option value='0'>请选择省份</option>";
$sql = "select * from province";
$result = mysql_query($sql) or die (mysql_error());
if (mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_array($result)) {
//print_r($row);
$str .= "<option value='".$row['id']."'>".$row['name']."</option>";
}
}
echo $str;
mysql_free_result($result);
break;
//显示城市
case 'city':
$str = "<option value='0'>请选择城市</option>";
if($_REQUEST["province"] != "") {
//根据省份得到城市
$sql = "select * from city where province_id=".$_REQUEST['province'];
$result = mysql_query($sql) or die (mysql_error());
if (mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_array($result)) {
$str .= "<option value='".$row['id']."'>".$row['city_name']."</option>";
}
}
mysql_free_result($result);
}//end of if
echo $str;
break;
}//end of switch
?>
执行效果如下:
分享到:
相关推荐
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可
jQuery移动端省市二级联动选择插件.zip
自己写的很小的程序仅仅能实现二级联动功能,第一次上传,还不太懂
jquery中的二级联动
一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
这是一款适用于网络营销,查询连锁店铺全国网点的jQuery省市二级联动关联店面查询表单代码,主要还是城市联动下拉选择菜单效果,查询结果还得程序里自己具体实现。
jquery 手机端省市二级联动选择代码,可以自己修改。
是一个jquery省市区三级联动,支持默认设置省、市、区,数据很全,调用简单,浏览器兼容很好,需要的下载试试吧
无刷新二级联动无刷新二级联动无刷新二级联动
java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单
jquery做的二级联动下拉列表,很有用的
jquery年月日三级联动,支持自定义初始日期
jQuery省市区三级联动
1、Jsp页面 ... //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; //初始化数据 jQuery(document).ready(function(){ getProvince(); });