利用AJAX做出二级联动效果

manx00

UID: 21893
帖子: 99
积分: 170
在线时间: 122小时
注册时间: 2008-03-22
最后登录: 2015-12-04

1^# manx00 发表于2008-07-17

利用AJAX做出二级联动效果

看了鱼的一章，感觉他的二级联动比较直接好看，
但我想要一个用XML文件的二级联动效果，所以自己做了一个。

rr.html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script language="javascript">
var xml;
var pid = -1;
var getid;
function createxml(){
   try{
      xml = new XMLHttpRequest();
   }
   catch(tt){
      try{
      xml = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e){
      xml = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if(!xml){
      alert("不能创建xml!");
   }
   else{
      //alert("正在创建xml");
      return xml;
   }
}

function ini(){
   createxml();
   xml.open("GET","rr.php?",true);
   xml.onreadystatechange = getvalue;
   xml.send(null);
}

function getvalue(){
   if(xml.readyState == 4){
      if(xml.status == 200){
      var getxml = xml.responML;
      if(pid == -1){
         var getdom = getxml.documentElement.nodeName;
         var getp_id = getxml.getElementsByTagName("p_id");
         var getname = getxml.getElementsByTagName("name");
         var str = "<select onchange='getse1()'><option>请选择</option>";
         for(var i=0;i<getp_id.length;i++){
            str += "<option value="+getp_id.item(i).firstChild.nodeValue+">"
            +getname.item(i).firstChild.nodeValue+"</option>";
         }
         str += "</select>";
         var show1 = document.getElementById("se1");
         show1.innerHTML = str;
      }
      else{
         var getid = getxml.getElementsByTagName("id");
         var getcityname = getxml.getElementsByTagName("cityname");
         var str2 = "<select>";
         for(var i=0;i<getid.length;i++){
            str2 += "<option value="+getid.item(i).firstChild.nodeValue+">"
            +getcityname.item(i).firstChild.nodeValue+"</option>";
         }
         str2 += "</select>";
         var dd=str2.toString();
         var show2 = document.getElementById("se2");
         show2.innerHTML = str2;
      }
      }
   }
}

function getse1(){
   var ppid = document.getElementById("se1").firstChild.options.selectedIndex;
   pid =  document.getElementById("se1").firstChild.options.item(ppid).value;
   iini();
}

function iini(){
   xml.open("GET","rr.php?pid="+pid,true);
   xml.onreadystatechange = getvalue;
   xml.send(null);
}
</script>
</head>
<body onload="ini()">
  <div id="se1" style='position:relative;height:50;width=30'></div><div id="se2" style='position:relative;top:-50;left:70;height:50;width=30'></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------
rr.php代码（做xml文件）：
<?php
ini_set("default_charset","gb2312");
header("Content-Type:text/xml");
$dom = new DOMDocument('1.0');
$city = $dom->createElement("city");
$dom->appendChild($city);
$city1 = $dom->createElement("city1");
$city->appendChild($city1);
$city2 = $dom->createElement("city2");
$city->appendChild($city2);
mysql_connect("localhost","root","");
mysql_select_db("city");
mysql_query("set names gb2312");
//找到省份
$sql1 = "select * from province;";
$result1 = mysql_query($sql1)or die(mysql_error());
while($row1 = mysql_fetch_row($result1)){
$p_id = $dom->createElement("p_id");
$p_idvalue = $dom->createTextNode($row1[0]);
$p_id->appendChild($p_idvalue);
$name = $dom->createElement("name");
$namevalue = $dom->createTextNode($row1[1]);
$name->appendChild($namevalue);
$city1->appendChild($p_id);
$city1->appendChild($name);
}
//找到城市
$pid = (int)$_GET['pid'];
if($pid != -1){
$sql2 = "select * from city_name where pid=$pid;";
$result2 = mysql_query($sql2)or die(mysql_error());
while($row2 = mysql_fetch_row($result2)){
$id = $dom->createElement("id");
$idvalue = $dom->createTextNode($row2[0]);
$id->appendChild($idvalue);
$pid = $dom->createElement("pid");
$pidvalue = $dom->createTextNode($row2[1]);
$pid->appendChild($pidvalue);
$cityname = $dom->createElement("cityname");
$cityvalue = $dom->createTextNode(iconv("gb2312","utf-8",$row2[2]));
$cityname->appendChild($cityvalue);
$city2->appendChild($id);
$city2->appendChild($pid);
$city2->appendChild($cityname);
}
}

$str = $dom->saveXML();
echo $str;
?>
---------------------------------------------------------------------------------------------------------------------------------------
数据库：
CREATE DATABASE `city`;
CREATE TABLE `city_name` (
  `id` int(10) NOT NULL auto_increment,
  `pid` int(10) NOT NULL,
  `cityName` varchar(30) character set gb2312 NOT NULL,
  PRIMARY KEY  (`id`)
) ;
CREATE TABLE `province` (
  `id` int(5) NOT NULL auto_increment,
  `name` varchar(30) NOT NULL,
  PRIMARY KEY  (`id`)
);

我不是鱼

UID: 2
帖子: 1402
积分: 3221
在线时间: 2077小时
注册时间: 2006-05-16
最后登录: 2019-01-15

2^# 我不是鱼发表于2008-07-22

试试。

如履薄冰

haizeng

UID: 33985
帖子: 7
积分: 228
在线时间: 11小时
注册时间: 2009-11-21
最后登录: 2010-06-14

3^# haizeng 发表于2009-12-03

恩看看