ul il列表结构javaScript

我有以下结构作为国家，省，市和郊区。如何在列表中添加以下结构。按照下表，我将以json格式从数据库中提取数据。想存储它并将其保存到像下面的列表中。ul il列表结构javaScript

<li>South Africa</li> 
<ul> 
<li><h3>Gauteng</h3><p>Gauteng Province.</p> 
<ul> 
    <li>Ekhurhuleni       
    <ul>       
    <li class="liid"><a href="#">Actionville</a></li> 
    <li class="liid"><a href="#">Alberton</a></li> 
    <li class="liid"><a href="#">Bakerton</a></li> 
    <li class="liid"><a href="#">Bedfordview</a></li> 
</ul>     
</li> 
</ul>

我将不得不添加结构回db，所以我需要保持关键。
这里是我的数据库表：

Table Country 
CountryID Country 
1   South Africa 
2   Egypt 


Table Province 
ProvinceID Provincename CountryID 
1    Gauteng  1 
2    Eastern Cape 1 
3    Free State 1 

Table City 
CityID  CityName  ProvinceID 
1    Ekurhuleni  1 


Table Suburb 
SuburbID  SuburbName  CityID 
1    Actonville  1 
2    Germiston  1

来源

2012-10-17 Krivahn Doss

如果这是一个编辑页面我会建议使用下拉列表，而不是无序列表。那么您可以使用内部ID作为选项值。 – jbabey

PHP：

$countries = array(); 
$q = "SELECT * FROM Country"; 
$res = mysql_query($q); 
while($row=mysql_fetch_assoc($res)){ 
    $countryId = $row['CountryID']; 
    $countries[$countryId] = array("data"=>$row,"provinces"=>array()); 
    $provinces = &$countries[$countryId]["provinces"]; 
    $qP = "SELECT * FROM Province P WHERE P.CountryID = $countryId"; 
    $resP = mysql_query($qP); 
    while($rowP = mysql_fetch_assoc($resP)){ 
     $provinceId = $rowP['ProvinceID']; 
     $provinces[$provinceId] = array("data"=>$rowP,'cities'=>array()); 
     $cities = &$provinces[$provinceId]; 
     $qC = "SELECT * FROM City C WHERE C.ProvinceID = $provinceId"; 
     $resC = mysql_query($qC); 
     while($rowC = mysql_fetch_assoc($resC)){ 
      $cityId = $rowC['CityID']; 
      $cities[$cityId] = array("data"=>$rowC,'suburbs'=>array()); 
      // AND SO ON FOR SUBURBS 
     } 
    } 
} 

$output="<ul>"; 
foreach($countries as $countryId=>$countryArray){ 
    $output.="<li id='$countryId'>"; 
    $output.="<h1>".$countryArray['data']['countryName']."</h1>"; 
     $output.="<ul>"; 
     foreach($countryArray['provinces'] as $provinceId=>$provinceArray){ 
      $output.="<li id='$provinceId'>"; 
      $output.="<h2>".$provinceArray['data']['provinceName']."</h2>"; 
      $output.="</li>"; 
     } 
     $output.="</ul>"; 
    $output.="</li>"; 
}

来源

2012-10-17 12:44:05

var Countries = [{...}, {...}, ...]; 
var Provinces = [{...}, {...}, ...]; 
var Cities = [{...}, {...}, ...]; 
var Suburbies = [{...}, {...}, ...]; 

var countriesUl = document.createElement('ul'); 
for (var i in Countries) { 
    var countryLi = document.createElement('li').appendTo(countriesUl); 
    document.createTextNode(Countries[i].Country).appendTo(countryLi); 
    var provincesUl = document.createElement('ul').appendTo(countryLi); 
    for (var j in Provinces) { 
     if (Provinces[j].CountryID != Countries[i].CountryID) continue; 
     var provinceLi = document.createElement('li').appendTo(provincesUl); 
     document.createTextNode('<h3>' + Provinces[j].Provincename + '</h3>').appendTo(provinceLi); 
     document.createTextNode('<p>' + Provinces[j].Provincename + ' province</p>').appendTo(provinceLi); 
     var citiesUl = document.createElement('ul').appendTo(provinceLi); 
     for (var k in Cities) { 
      if (Cities[k].ProvinceID != Provinces[j].ProvinceID) continue; 
      var cityLi = document.createElement('li').appendTo(citiesUl); 
      document.createTextNode(Cities[k].CityName).appendTo(cityLi); 
      var suburbiesUl = document.createElement('ul').appendTo(cityLi); 
      for (var l in Suburbies) { 
       if (Suburbies[l].CityID != Cities[k].CityID) continue; 
       var suburbLi = document.createElement('li').appendTo(suburbiesUl); 
       document.createTextNode(Suburbies[l].SuburbName).appendTo(suburbLi); 
      } 
     } 
    } 
} 

// do whatever you want with countriesUl 
countriesUl.appendTo(document.body);

来源

2012-10-17 13:34:53

ul il列表结构javaScript

回答

相关问题