2009-02-06 102 views
2

我想寫一個PHP腳本,將基於選擇的主下拉菜單填充第二個下拉菜單。我想用jQuery來做所有非頁面刷新的東西。但是我發現的所有東西都存在很難理解和修改,你知道任何寫得很好,容易理解的東西,或者可能存在的教程嗎?php下拉菜單人口

回答

0

兩種不同的方式:

  • 使返回所需的第二級
  • 寫樹結構,爲所有可能的選擇,所有需要的數據的數據的第一級觸發器AJAX的查詢,以及隱藏在Javascript可以讀取的最初頁面的某處。完成的HTML菜單(根據需要隱藏和顯示)或JS部分中的大JSON對象。
2

有是如何做到這一點在網絡上相當多的例子,從雷米夏普一個好here在他的博客(full example here

基本上你正在做的是調用一個PHP頁面您的服務器與您的第一個下拉列表的值隨時更改。例如,如果您的第一個下拉列表是美國的州列表,則您的第二個下拉列表可能會顯示處於選定狀態的城市。如果選擇第一個下拉,這是onChange事件觸發給您的服務器上的PHP頁面的請求,通過國家域名(example.com/city_lookup.php?state=NY

了jQuery然後接收來自city_lookup腳本(JSON encoded的反應可能是最好的然後循環瀏覽並將值寫入第二個下拉菜單。

4

下面是一些代碼,應該給你的,你想要做什麼的想法:

HTML

<select id="state" name="state"> 
    <option value="IL">Illinois</option> 
    <option value="IN">Indiana</option> 
</select> 
<select id="city" name="city"> 
    <option value="">Please select a state...</option> 
</select> 

PHP

<?php 
    $cities = array(
     'IL' => array('Chicago', 'Naperville', 'Decatur', 'Saint Charles'), 
     'IN' => array('Gary', 'Miller', 'Portage', 'Merrillville') 
    ); 

    print json_encode($cities[ $_POST[ 'state' ] ]); 
    exit; 
?> 

jQuery的

jQuery(document).ready(function() { 

    jQuery('#state').change(function() { 
     jQuery.post(
      'some-url.php', 
      { 
       'state':jQuery('#state').val() 
      }, 
      function(data, textStatus) { 
       jQuery.each(data, function(index, value) { 
        jQuery('#city').append('<option value="' + value + '">' + value + '</option>'); 
       }); 
      }, 
      'json' 
     ); 
    }); 

}); 
2

再添加一個線jQuery('#city').html('');
現在的代碼如下所示:

jQuery(document).ready(function() { 

    jQuery('#state').change(function() { 

      jQuery('#city').html(''); 
      jQuery.post(
       'some-url.php', 
       { 
         'state':jQuery('#state').val() 
       }, 
       function(data, textStatus) { 
         jQuery.each(data, function(index, value) { 
           jQuery('#city').append('<option value="' + value + '">' + value + '</option>'); 
         }); 
       }, 
       'json' 
     ); 
    }); 

});