0

ドロップダウンでいくつかの機能を実行するには、いくつかの ajax コードが必要です。3 つの値の表があります。1 つは国、次に州と市です。そして、これらの値を表示する 3 つのドロップダウンがあります。

まず、次のように表示されます。

  • 国を選択
  • 状態を選択
  • 都市を選択

そのドロップダウン（選択）でそれぞれ。

最初のドロップダウンからイギリスを選択すると、2 番目のドロップダウンにイギリスの州が表示される必要があります。また、州のドロップダウンから州を選択すると、その州の都市を 3 番目のドロップダウン (都市) に表示する必要があります。

これをajaxでやりたい。これを行うコードはありますか？

4

3 に答える 3

0

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

于 2012-07-27T05:35:41.947 に答える
0

すでにjQueryに精通している場合は、$。ajax（）（http://api.jquery.com/jQuery.ajax/）を介してajaxリクエストを送信する方法を確認することをお勧めします。成功オプションの州と都市で、onchangeイベントを州と国のドロップダウンにバインドすることでajax呼び出しの送信をトリガーします。これを行うには、 .bind（）（http://api.jquery.com/bind/）を使用できます。

于 2012-07-27T05:24:47.750 に答える
0

私はあなたが必要とすることをやった ここに行く

タイプ、場所を選択します。私はあなたがそれを変更できる私のコードを投稿します。

更新しまし た。上記のサイトからコードをコピーします。変更を加えました。「タイプ」ドロップダウンのコードを貼り付けます。他の人にも同じことができます。もう 1 つ、非常に古いプロジェクトなので、jQuery ではなく Javascript で作成しました。:(

<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
 }
?>

自分でコーディングする時が来ました 乾杯

于 2012-07-27T05:37:06.540 に答える