填充彼此依赖的连锁组合框ajax联动

1。数据库

create table country(id int(11) not null auto_increment,
countryName varchar(64) not null,primary key(id));
create table states(id int(11) not null auto_increment,countryId int not null,stateName varchar(64) not null,primary key(id));
insert into states values(1,1,'U.P.'),(2,1,'Uttarakhand');
create table towns(id int(11) not null auto_increment,
stateId int not null,townName varchar(64) not null,
primary key(id)
);

insert into country values(1,'india');
insert into towns values(1,1,'Lucknow'),(2,1,'Bareilly'),(3,2,'Pithora'),(4,2,'Dehr'),(5,2,'asdf');

create table towninfo(id int not null auto_increment,townId int not
null,description text not null, primary key(id));
insert into towninfo values(1,3,'ddddd'),(2,4,'asdfasfafas'),(3,1,'asdfasfas');

2.index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body{font-family:"Trebuchet MS",Verdana,Arial;width:600px;}
ul{list-style:none;margin:0pt;padding:0pt;width:525px;float:left;}
li{float:left;padding:10px;}
p{border:1px solid #000;float:left;height:100px;width:500px;}
select{width:100px;}
</style>
</head>
<body>
<ul>
<li><strong>Country</strong>
<select id="countryList">
<option value="">select</option>
</select>
</li>
<li>
<strong>State</strong>
<select id="stateList">
<option value="">select</option>
</select>
</li>

<li>
<strong>Town</strong>
<select id="townList">
<option value="">select</option>

</select>
</li>
</ul>
<p id="information"></p>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('select').change(getList);
     getList();
     function getList()
     {
          var url,taret;
          var id=$(this).attr('id');
          var selectedValue=$(this).val();
          switch(id){
          case 'countryList':
               if(selectedValue=='') return;
               url='results.php?find=state&id='+selectedValue;
               target='stateList';
               break;
          case 'stateList':
               if($(this).val()=='') return;
               url='results.php?find=town&id='+selectedValue;
               target="townList";
               break;
          case 'townList':
               if($(this).val()=='') return;
               url='results.php?find=information&id='+selectedValue;
               target='information';
               break;
          default:
               url='results.php?find=country';
               target='countryList';
          }
          $.get(url,{},function(data){$('#'+target).html(data)});
     }

});

</script>
</body>
</html>

3.results.php

<?php
$mysqli=new mysqli('localhost','root','','test');
$find=$_GET['find'];
switch ($find){
     case 'country':
          $query='select id,countryName from country';
          break;
     case 'state':
          $query='select id,stateName from states where countryId='.$_GET['id'];
          break;
     case 'town':
          $query='select id,townName from towns where stateId='.$_GET['id'];
          break;
     case 'information':
          $query='select id,description from towninfo where townId='.$_GET['id'].' limit 1';
          break;
}
if($mysqli->query($query)){
     $result=$mysqli->query($query);
     if($find=='information')
     {
          if($result->num_rows>0){
               $row=$result->fetch_array();
               echo $row[1];
          }else{
               echo 'No information found';
          }
     }else{
          ?>
          <option value="">select</option>
          <?php
          while($row=$result->fetch_array()){
               ?>
               <option value="<?php echo $row[0];?>"><?php echo $row[1];?></option>
               <?php
          }

     }
}?>

posted @ 2014-03-31 17:37 wint Views(119) Comments(0) 收藏举报

刷新页面返回顶部

wint

填充彼此依赖的连锁组合框ajax联动

公告