通过ajax选择下拉菜单

Question

我需要一些 ajax 代码来做一些下拉功能。我有三个值表：一个是国家，然后是州和城市。我有三个下拉菜单来显示这些值。

首先应该显示：

• 选择国家
• 选择状态
• 选择城市

分别在该下拉菜单中（选择）。

当我从第一个下拉列表中选择英国时，在第二个下拉列表中它必须显示英国的国家。同样，当我从州下拉列表中选择一个州时，它必须在第三个下拉列表（城市）中显示该州的城市。

我想用 ajax 来做这件事。有没有人有代码可以做到这一点？

Answer 1

如果您已经熟悉 jQuery，您可能想查看如何通过 $.ajax() (http://api.jquery.com/jQuery.ajax/) 发送 ajax 请求您可以在成功选项中添加更新州和城市列表的代码，然后通过将 onchange 事件绑定到州和国家/地区下拉菜单来触发发送 ajax 调用。您可以使用 .bind() (http://api.jquery.com/bind/) 来执行此操作。

Answer 2

片段http://coffeestain-it.blogspot.fr/2011/08/mvc3-cascading-lists-using-ajax-and.html?m=1

Answer 3

我已经做了你需要的 Go Here

选择类型、位置。如果您需要相同的内容，我会这样做，我会发布我的代码，您可以修改它

更新 我要从上面的网站复制代码，我让你修改它。我将粘贴“类型”下拉列表的代码，你可以这样做，而不是为其他人做。 另一件事是它非常古老的项目，所以我是通过 Javascript 而不是 jQuery 完成的，希望它会激怒你。 :(

<td>Type</td>
<td>
      <select  id="type" onChange="propertyType(this.value)" name="type">
                            <option value="">All</option>
                            <option value="homes">Homes</option>
                            <option value="plots">Plots</option>
                            <option value="commercial">Commercial</option>
      </select>
</td>

这是propertyType的js

function propertyType(str){
  if(str=='' || str=='plots'){
    document.getElementById("type_h").innerHTML=""; 
    document.getElementById("bed").innerHTML="";    
    }   
    else if(str=='commercial'){
    document.getElementById("bed").innerHTML="";    
          }
 else{
  document.getElementById("type_h").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />";
    if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
 }
 else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
    xmlhttp.onreadystatechange=function()
   {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("type_h").innerHTML=xmlhttp.responseText;
    }
   }
   xmlhttp.open("GET","ajax/propertytype.php?s="+str,true);
   xmlhttp.send();
   }
 }

这是propertytype.php

<?php
  $s=$_GET["s"];
  if($s=="homes"){
   ?>


 <select onchange="ajax_bed(this.value)" name="subtype" id="subtype" >
  <option value="">Type Of Houses</option>
  <option value="houses">Houses</option>
  <option value="flats">Flats</option>
  <option value="farmhouses">Farm Houses</option>
</select>

<?php
}
 if($s=="plots")
{
?>


 <?php
  }
  if($s=="commercial")
  {
  ?>
  <select name="subtype" id="subtype" >
   <option value="offices">Offices</option>
   <option value="shops">Shops</option>
   <option value="warehouses">Warehouses</option>
   <option value="factories">Factories</option>
   <option value="building">Buildings</option>
   <option value="other">Other</option>
  </select>
   <?php
  }
?>

这是选择卧室数量的ajax函数

function ajax_bed(str){
  document.getElementById("bed").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />";
  if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
   }
  else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xmlhttp.onreadystatechange=function()
   {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("bed").innerHTML=xmlhttp.responseText;
    }
   }
   xmlhttp.open("GET","ajax/bedroomsselection.php?t="+str,true);
   xmlhttp.send();
 }

这是卧室选择.php

<?php
$t=$_GET["t"];
if($t=="houses"||$t=="flats"||$t=="farmhouses")
{
?>
 <select id="bed" name="bed">
   <option>None</option>
   <option>Single Bed</option>
   <option>Double Bed</option>
   <option>three Bed</option>
   <option>Four Bed</option>
   <option>Five Bed</option>
   <option>Six Bed</option>
   <option>Seven Bed</option>
   <option>Eight Bed</option>
   <option>Ten Bed</option>
   <option>More Than Ten Bed</option>
</select>


 <?php
 }
?>

我希望你现在已经有了这个想法，是时候自己编写代码了 干杯