|
test.html
|
ld―jquery多级联动插件
这是个不错多级联动插件,用起来比较简单实用,如果非要吹毛求疵的话,就是需要加载文件少多一点.
这个是插件作者的博客,里有有实例和下载,大家想想要详细了解可以去看看
http://www.36ria.com/2955
因为原版里是连接数据库,想下到本地看效果很费劲.我这里写个简单用法,用于给新手立马上手能用.
<!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" />
< title >$.ld――jquery多级联动插件 V1.0 </title>
< link href ="style/css/base.css" rel ="stylesheet" type ="text/css" />
< link href ="style/css/demo.css" rel ="stylesheet" type ="text/css" />
</head>
< body >
< div id ="header" class ="clearfix" >
< div id ="logo" class ="l" > < img src ="style/images/logo.png" /> </div>
< div class ="l" >
< h2 >$.ld――jquery多级联动插件 V1.0 </h2>
< p >作者：明河共影，博客： < a href ="http://www.36ria.com/" >RIA之家 </a> </p>
< p >插件文档： < a href ="http://www.36ria.com/2955" >http://www.36ria.com/2955 </a> </p>
</div>
</div>
< h2 >示例1：最基础的示例演示，读取json </h2>
< table width ="700" border ="0" cellspacing ="0" cellpadding ="0" class ="tab1" >
< tr >
< td >国家 </td>
< td > < select class ="ld-select-1" name ="country" >
< option value="" >请选择你的国家 </option>
</select>
</td>
< td >省份 </td>
< td > < select class ="ld-select-1" name ="province" >
< option value="" >请选择你的省份 </option>
</select>
</td>
< td >城市 </td>
< td > < select class ="ld-select-1" name ="city" >
< option value="" >请选择你的城市 </option>
</select>
</td>
< td >区县 </td>
< td > < select class ="ld-select-1" name ="county" >
< option value="" >请选择你的区县 </option>
</select>
</td>
</tr>
</table>
< code >
$(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"}, < br />
style : {"width" : 120} < br />
});
</code>
< script src ="js/jquery-1.4.2.min.js" > </script>
< script src ="js/jquery.ld.js" > </script>
< script type ="text/javascript" >
$(function(){
//示例1
$(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
style : {"width" : 120}
});
})
</script>
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >$.ld――jquery多级联动插件 V1.0 </title>
< link href ="style/css/base.css" rel ="stylesheet" type ="text/css" />
< link href ="style/css/demo.css" rel ="stylesheet" type ="text/css" />
</head>
< body >
< div id ="header" class ="clearfix" >
< div id ="logo" class ="l" > < img src ="style/images/logo.png" /> </div>
< div class ="l" >
< h2 >$.ld――jquery多级联动插件 V1.0 </h2>
< p >作者：明河共影，博客： < a href ="http://www.36ria.com/" >RIA之家 </a> </p>
< p >插件文档： < a href ="http://www.36ria.com/2955" >http://www.36ria.com/2955 </a> </p>
</div>
</div>
< h2 >示例1：最基础的示例演示，读取json </h2>
< table width ="700" border ="0" cellspacing ="0" cellpadding ="0" class ="tab1" >
< tr >
< td >国家 </td>
< td > < select class ="ld-select-1" name ="country" >
< option value="" >请选择你的国家 </option>
</select>
</td>
< td >省份 </td>
< td > < select class ="ld-select-1" name ="province" >
< option value="" >请选择你的省份 </option>
</select>
</td>
< td >城市 </td>
< td > < select class ="ld-select-1" name ="city" >
< option value="" >请选择你的城市 </option>
</select>
</td>
< td >区县 </td>
< td > < select class ="ld-select-1" name ="county" >
< option value="" >请选择你的区县 </option>
</select>
</td>
</tr>
</table>
< code >
$(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"}, < br />
style : {"width" : 120} < br />
});
</code>
< script src ="js/jquery-1.4.2.min.js" > </script>
< script src ="js/jquery.ld.js" > </script>
< script type ="text/javascript" >
$(function(){
//示例1
$(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
style : {"width" : 120}
});
})
</script>
</body>
</html>
|
get_region.php
|
<?php
ob_start();
/*
function runSQL($rsql) {
$hostname = 'localhost';// 数据库服务器
$username = 'root'; // 数据库用户名
$password = '123'; // 数据库密码
$dbname = 'ld'; // 数据库名
$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);
mysql_query('set names utf8');
$result = mysql_query($rsql);
return $result;
mysql_close($connect);
}
*/
include("include/JSON.php");
/*if(isset($_GET['parent_id'])){
$where = "WHERE parent_id = ".$_GET['parent_id']." ";
}else{
$where = "WHERE parent_id = 0 ";
}*/
/*$sql = "SELECT * FROM region $where";
$result = runSQL($sql);*/
$data_type = "json";
if(isset($_GET['data_type'])){
$data_type = $_GET['data_type'];
}
if($_GET['parent_id'] == 0){
$rows = array(array('region_id'=>1,'region_name'=>"我X1"),array('region_id'=>2,'region_name'=>"我X2"),array('region_id'=>3,'region_name'=>"我X3"),array('region_id'=>4,'region_name'=>"我X4"));
}else{
$rows = array(array('region_id'=>1,'region_name'=>"我T1"),array('region_id'=>2,'region_name'=>"我T2"),array('region_id'=>3,'region_name'=>"我T3"),array('region_id'=>4,'region_name'=>"我T4"));
}
if($data_type == "json"){
$json_str = "[";
$json = array();
foreach($rows as $row) {
/* $r = array('region_id' => $row['region_id'],
'region_name' => $row['region_name']);*/
$json[] = JSON($row);
}
$json_str .= implode(',',$json);
$json_str .= "]";
echo $json_str;
}else if($data_type == "xml"){
header("Content-type: text/xml;");
$xml = "<?xml version='1.0' encoding='UTF-8'?>";
$xml .= "<root>";
while ($row = mysql_fetch_array($result)) {
$xml .= "<record>";
$xml .= "<region_id>".$row['region_id']."</region_id>";
$xml .= "<region_name>".$row['region_name']."</region_name>";
$xml .= "</record>";
}
$xml .="</root>";
echo $xml;
}
?>
ob_start();
/*
function runSQL($rsql) {
$hostname = 'localhost';// 数据库服务器
$username = 'root'; // 数据库用户名
$password = '123'; // 数据库密码
$dbname = 'ld'; // 数据库名
$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);
mysql_query('set names utf8');
$result = mysql_query($rsql);
return $result;
mysql_close($connect);
}
*/
include("include/JSON.php");
/*if(isset($_GET['parent_id'])){
$where = "WHERE parent_id = ".$_GET['parent_id']." ";
}else{
$where = "WHERE parent_id = 0 ";
}*/
/*$sql = "SELECT * FROM region $where";
$result = runSQL($sql);*/
$data_type = "json";
if(isset($_GET['data_type'])){
$data_type = $_GET['data_type'];
}
if($_GET['parent_id'] == 0){
$rows = array(array('region_id'=>1,'region_name'=>"我X1"),array('region_id'=>2,'region_name'=>"我X2"),array('region_id'=>3,'region_name'=>"我X3"),array('region_id'=>4,'region_name'=>"我X4"));
}else{
$rows = array(array('region_id'=>1,'region_name'=>"我T1"),array('region_id'=>2,'region_name'=>"我T2"),array('region_id'=>3,'region_name'=>"我T3"),array('region_id'=>4,'region_name'=>"我T4"));
}
if($data_type == "json"){
$json_str = "[";
$json = array();
foreach($rows as $row) {
/* $r = array('region_id' => $row['region_id'],
'region_name' => $row['region_name']);*/
$json[] = JSON($row);
}
$json_str .= implode(',',$json);
$json_str .= "]";
echo $json_str;
}else if($data_type == "xml"){
header("Content-type: text/xml;");
$xml = "<?xml version='1.0' encoding='UTF-8'?>";
$xml .= "<root>";
while ($row = mysql_fetch_array($result)) {
$xml .= "<record>";
$xml .= "<region_id>".$row['region_id']."</region_id>";
$xml .= "<region_name>".$row['region_name']."</region_name>";
$xml .= "</record>";
}
$xml .="</root>";
echo $xml;
}
?>
|
这里简单说明下 我为了下载后就能看到效果 就把原版的数据库连接全部注释了 而用数组来充当数据库返回结果 如果你是连接数据库的话那就把注释去掉改写下 或者去下原版吧
还有这里我贴的是我改的两个文件 但并不是有这两个就能用 我把例子上传到这里 想要就去下吧
jquery多级联动插件及实例
|