使用PHP MySql jQuery将数据检索到ajax下拉菜单中

我使用Jquery/PHP/MySql创建动态多国家下拉列表。 这工作正常，我在MySql数据库中为每个用户store/put国家/州/城镇，如下所示(usertable) ：

 id | country | state | town | 1 | 1 | 1 | 1 | 2 | 1 | 1 | 3 | 3 | 1 | 2 | 8 | 

现在在edituser.php页面中我需要fetch/retrieve MySql数据(usertable)到我的Jquery / Ajax下拉列表。 我打电话给edituser.php?id=1现在我需要打印/显示用户数据以下拉dropdown Ajax来编辑国家/州/城镇用户。

我如何检索/打印/显示这个？

JS：

  // jquery library file  /*This function is called when state dropdown value change*/ function selectState(state_id){ if(state_id!="-1"){ loadData('city',state_id); }else{ $("#city_dropdown").html("Select city"); } } /*This function is called when city dropdown value change*/ function selectCity(country_id){ if(country_id!="-1"){ loadData('state',country_id); $("#city_dropdown").html("Select city"); }else{ $("#state_dropdown").html("Select state"); $("#city_dropdown").html("Select city"); } } /*This is the main content load function, and it will called whenever any valid dropdown value changed.*/ function loadData(loadType,loadId){ var dataString = 'loadType='+ loadType +'&loadId='+ loadId; $("#"+loadType+"_loader").show(); $("#"+loadType+"_loader").fadeIn(400). html('Please wait... '); $.ajax({ type: "POST", url: "loadData.php", data: dataString, cache: false, success: function(result){ $("#"+loadType+"_loader").hide(); $("#"+loadType+"_dropdown"). html("Select "+loadType+""); $("#"+loadType+"_dropdown").append(result); } }); }  

HTML：

 /*This code will show country dropdown list*/  Select country  <option value="">     /*State dropdown list*/  Select state   /*City dropdown list*/  Select city   

Loaddata.php

 include('dbConnect.inc.php'); $loadType=$_POST['loadType']; $loadId=$_POST['loadId']; if($loadType=="state"){ $sql="select id,state_name from state_test where country_id='".$loadId."' order by state_name asc"; }else{ $sql="select id,city_name from city_test where state_id='".$loadId."' order by city_name asc"; } $res=mysql_query($sql); $check=mysql_num_rows($res); if($check > 0){ $HTML=""; while($row=mysql_fetch_array($res)){ $HTML.="".$row['1'].""; } echo $HTML; } 

Answer 1

我知道Kendo UI下拉小部件将解决这个问题。 它上面有一个级联function

Answer 2

很少考虑你的代码

• 使用AJAX，尝试使用JSON发送和检索数据，它将为您提供更多关于变量和UI的自由。

• 当您使用jQuery时，尽量使用它，而不是定义在线事件，如果您在脚本中对它们进行分组，您将更容易管理它。

• 关于选择，它是非常棘手的重新加载它们。 在IE中我记得我无法添加选项，因此，您必须加载WHOLE选择。

• 不要使用PHP的mysql_query函数，已经完全弃用了。 阅读并应用： 如何在PHP中阻止SQL注入？

• 从AJAX加载值时，必须将处理程序附加到DOM元素，这就是使用.on（）函数的原因，以确保它将处理程序附加到元素。

• 尝试使用更新的jQuery库，因为它们更快，更强大并且性能更高，1.4已经很老了……

我已经给你写了一个使用上述东西的国家下拉的例子，给你一个如何实现它的线索，采取你认为你喜欢它：

index.html的：

       
  Select Country Spain France Germany  
 
  Select Country  
 
  Select State  
   

state.php

  Select State state 1 state 2 '; break; case 'state': $result = true; $html = ' Select City city 1 city 2 '; break; default: $result = false; $html = ''; break; } } $data = array( 'result' => $result, 'html' => $html ); 

我已经添加了一些关于如何实现它的线索，这是一个独立的例子，你会看到Dropbox的变化。 你必须添加PHP逻辑，但我想向你展示一个更好的方法，XD