如何使用jQuery在PHP中创建级联下拉列表

I have database consists of countries and cities.

我的数据库由国家和城市组成。

First Case - Successfully done:

第一个案例 - 成功完成:

Country list gets populated in drop box on page load

国家/地区列表在页面加载时在下拉框中填充

City list gets populated in drop box on page load - populated city list is based on the default country.

城市列表在页面加载的下拉框中填充 - 填充的城市列表基于默认国家/地区。

Second Case - Couldn't make it:

第二种情况 - 无法做到:

User changes country

用户更改国家/地

City list will be changed according to selected country

城市列表将根据所选国家/地区进行更改

I know i have to use jQuery/Ajax. I tried but i couldn't solve my problem due to my lack of programming experience. My list is fetched from database not XML. I just need a quick solution, i need to keep it simple and stupid.

我知道我必须使用jQuery / Ajax。我试过,但由于缺乏编程经验,我无法解决我的问题。我的列表是从数据库而不是XML中获取的。我只需要一个快速的解决方案,我需要保持简单和愚蠢。

I'm using regular PHP coding style, not Object-Oriented.

我使用常规的PHP编码风格,而不是面向对象。

How can i do it? Any related resources will be appreciated.

我该怎么做?任何相关的资源将不胜感激。

3 个解决方案

#1

$("#country").change(function(){
    $('#city').find('option').remove().end(); //clear the city ddl
    var country = $(this).find("option:selected").text();
    alert(country);
    //do the ajax call
    $.ajax({
        url:'getCity.php'
        type:'GET',
        data:{city:country},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('city');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});

in your getCity.php

在你的getCity.php中

$country = $_GET['city'];

//do the db query here

$query  = "your query";
$result = mysql_query($query);
$temp = array();
while ($row = mysql_fetch_assoc($result)) {

 if(empty($temp))
 {
   $temp=array($row['city']);
 }
 else
 {  
   array_push($temp,$row['city']);
 }

}
echo (json_encode($temp));

#2

You can do that by making ajax call on change of select box value by using .change() method of jquery. api.jquery.com/change/

您可以通过使用jquery的.change()方法更改选择框值来进行ajax调用。 api.jquery.com/change/

#3

write data instead of obj. It works perfectly fine

写数据而不是obj。它工作得非常好

#1

$("#country").change(function(){
    $('#city').find('option').remove().end(); //clear the city ddl
    var country = $(this).find("option:selected").text();
    alert(country);
    //do the ajax call
    $.ajax({
        url:'getCity.php'
        type:'GET',
        data:{city:country},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('city');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});