js+php 实现select两级联动+数据读取

js两级联动其实网上还是有很多代码可以找的。最关键的问题在于数组数据的读取。

这里运用了getJSON从php获取数据，然后php读mysql数据库。

js代码：

<script>
var aProvince = new Array();
var aProvinceID = new Array();
var aCity = new Array();
var aCityID = new Array();
function init()
{
    var request = "";
    var c1 = new Array();
    var c1ID = new Array();
    var c2 = new Array();
    var c2ID = new Array();
    $.getJSON("js_data.php",request,function(response){
        $.each(response.data, function(i) {
            c1[i] = response.data[i].name;
            c1ID[i] =  response.data[i].id;
            c2[i] = new Array();
            c2ID[i] = new Array();
             $.each(response.data[i].data, function(j) {   
                 c2[i][j] = response.data[i].data[j].name;
                 c2ID[i][j] = response.data[i].data[j].id;
             });
      });
      aProvince = c1;
      aProvinceID = c1ID;
      aCity = c2;
      aCityID = c2ID;
                 
      //alert(aProvince);
      loadProvince();
      loadCity(0);
   });
}
function loadProvince() {
   for(var i=0; i<aProvince.length; i++){
        $("select#selChapter").append("<option value='"+aProvinceID[i]+"'>"+aProvince[i]+"</option>");
    }
    $("select#selChapter").append("<option value=\"-1\" class=\"addChapter\">新增一章</option>");
    $("select#selChapter").change(function(){
                      
            var obj = document.getElementById("selChapter");
            var index = obj.selectedIndex;
                       
            if(obj.options[index].value != -1)
           {
                $("select#selSection").html("");
                loadCity(index);
           }
    })
}
function loadCity(index) {
    for(var i=0; i< aCity[index].length; i++) { 
        $("select#selSection").append("<option value='"+aCityID[index][i]+"'>"+aCity[index][i]+"</option>");
    }
    $("select#selSection").append("<option value=\"-1\" class=\"addSection\">新增一节</option>");
}
</script>

select标签：

<tr>
  <td>所属章</td>
  <td><select id="selChapter" name="chapterId">
  </select>
  <input class="newChapter" name="newChapter" type="text" value="请输入新章标题" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
  </td>
</tr>
<tr>
  <td>所属节</td>
  <td><select id="selSection" name="sectionId">
  </select>
  <input class="newSection" name="newSection" type="text" value="请输入新节标题" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
  </td>
</tr>

php代码：

<?php
    $return_data = Array();
    require_once('../database_config.php');
      
    $sql = "select Chap_No,Title from chapter";
    $sqlf = mysql_query($sql);
    if($sqlf && mysql_num_rows($sqlf) > 0)
    {
        $i = 0;
        while(($info = mysql_fetch_object($sqlf)))
        {
             $return_data['data'][$i]['id'] = $info->Chap_No;
             $return_data['data'][$i]['name']  = $info->Title;
               
             $j = 0;
             $sql1 = "select Sect_No,Title from section where Chap_Id=".$info->Chap_No;
             $sqlf1 = mysql_query($sql1);
             while(($info1 = mysql_fetch_object($sqlf1)))
             {
                $return_data['data'][$i]['data'][$j]['id'] = $info1->Sect_No;
                $return_data['data'][$i]['data'][$j]['name'] = $info1->Title;
                $j++;
             }
             $i++;
        }
        $return_data['status'] = 1;
    }
    else
    {
        $return_data['status'] = 5;
    }
    echo json_encode($return_data);
?>