当前位置: 首页 > 面试题库 >

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

卓星波
2023-03-14
问题内容

我的数据库包含国家和城市。

第一种情况-成功完成:

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

第二种情况-无法成功:

  1. 用户更改国家
  2. 城市列表将根据所选国家/地区更改

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

我正在使用常规的PHP编码样式,而不是面向对象的。

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


问题答案:
$("#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);

    }
    });

});

在您的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));


 类似资料:
  • 问题内容: 我有以下问题: 我开始用HTML和JS创建表单,并且有两个下拉菜单(国家和城市)。现在,我想使用JQuery使这两个动态,以便仅显示所选国家/地区的城市。 我从一些基本的JS入手,但效果不错,但在IE中却有些麻烦。现在,我正在尝试将JS转换为JQuery,以获得更好的兼容性。 我原来的JS看起来像这样: 我知道这很简单,但是我看不到树木的木头。 问题答案: 它应该像

  • 问题内容: 我有以下代码以生成级联下拉列表,但是由于某种原因,ajax发布无法正常工作。我可以获取它以填充状态列表,当我选择一个状态时,我会向我显示正确的值,但是当需要发布到fetch_state.php时,它似乎发布了null。有人可以帮我解释为什么这样做吗? 这是下面的代码 fetch_state.php 我不断收到错误 问题答案: 首先,将您更改为 然后用引号引起来 同时,把块出来的,只是有

  • 问题内容: 我必须制作一个带有多个互相修改的下拉菜单的表单。菜单/数据库表是: 类别,样式,类型和机制 我尝试使用有限的Ajax知识来执行此操作,但是似乎只能访问一次MySQL(在初始页上)以填充Categories表,而后无法通过查询下一组结果来更新Styles表。我收到一个错误,声称数据库为空。 我还尝试通过选项组填充下拉列表,以使用循环查询来处理“类别”和“样式”,但是仅显示“类别”标题,而

  • 我正在尝试为Android Studio中的一个活动创建一个下拉列表。我试过用旋转器。 下面是我的xml代码: 下面是我的Java代码: 有没有人知道我该怎么做?

  • 我试图在AngularJS中实现依赖级联下拉列表。它很好:如果我选择任何国家(例如:),那么在第二个下拉框中会显示状态(例如:、、)(这很好)。 但是我的要求是:在显示了一个国家的上述相关状态之后,我只需要在第一个下拉框中显示给定状态的相应所选国家(例如,如果我选择了Country1的

  • 问题内容: react-bootstrap站点中的示例代码显示以下内容。我需要使用数组来驱动选项,但是在查找将要编译的示例时遇到了麻烦。 问题答案: 您可以从这两个功能开始。第一个将基于传递到页面的道具动态创建您的选择选项。如果将它们映射到状态,则选择将自行重新创建。 然后,您将在render内部拥有此代码块。您将传递一个对onChange道具的函数引用,每次调用onChange时,所选对象将自动