2017-06-02 162 views
0

我有兩個選擇選項CountriesStates。使用php函數從數據庫填充選項值。我想填充States,具體取決於Countries的選擇。例如,如果我從Countries中選擇美國,那麼States選擇選項將填充屬於美國國家的所有States從另一個選擇框中動態填充選擇框的值

這裏是我的代碼 -

<select id="countryName" name="countryName" onChange="getCountryCode()"> 
    <option value=""></option> 
    <?php $countries = $location->getCountries(); 
     foreach ($countries as $country) { 
      echo '<option value="' . $country->id . '">' . $country->name . '</option>'; 
     } 
    ?>           
</select> 

我可以使用所選國家的值javascript功能

<script type="text/javascript"> 
    function getCountryCode(){ 
     var countryCode = document.getElementById('countryName').value; 
    } 
</script> 

畢竟這些,我試圖使用PHP來獲得選擇CountryStates功能getStates($countryCode)。但我不知道如何將javascript變量傳遞給php函數。

<select name="stateName"> 
    <option value=""></option> 
    <?php $states = $location->getStates($countryCode); 
      foreach ($states as $state) { 
       echo '<option value="' . $state->id . '">' . $state->name . '</option>'; 
      } 
    ?> 
</select> 

沒有人有任何想法我如何通過JavaScript變量到PHP或者有更好的主意比這,請不要的份額。

謝謝!

+1

您應該使用Ajax爲,結合它調用一個'。對( '變')'事件。 – doutriforce

+0

感謝您的意見,你介意與一些例子分享。對不起,但我不擅長JavaScript或Ajax。 –

+1

我建議通過閱讀https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming它也有一個參考另一篇文章https://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript/23741119這應該讓你到終點線。 –

回答

1

目前,您將JavaScript代碼(客戶端)與PHP代碼(服務器端)混合使用。這是不可能的。將內容發送到瀏覽器後,php必須等待,直到用戶再次調用服務器的某個操作。就你而言,有兩種可能的解決方案。

  1. 使用AJAX從服務器獲取狀態選擇框的內容。的一種方法是一個簡單的PHP腳本,它只是打印狀態:

PHP腳本

$states = $location->getStates($_GET['state']); 
foreach ($states as $state) { 
    echo '<option value="' . $state->id . '">' . $state->name . '</option>'; 
} 

的Javascript(使用jQuery)

$('#countryName').on('change', function() { 
    $.ajax({ 
     url: 'states.php', 
     data: { state: $(this).val() }, 
     type: 'GET', 
     success: function(data) { 
      $('select[name="stateName"]').html(data); 
     } 
    }); 
}); 
  • 沒有ajax的另一個解決方案是始終打印所有狀態並顯示/隱藏它們與您所在國家/地區的值相關
  • PHP腳本

    $states = $location->getAllStates(); 
    foreach ($states as $state) { 
        echo '<option data-country="{$state->country}" value="{$state->id}">{$state->name}</option>'; 
    } 
    

    的JavaScript(使用jQuery)

    $(function() { 
        var $statesSelect = $('select[name="stateName"]'); 
        var $states = $('option', $statesSelect); 
        // first remove all elements from dom 
        $states.detach(); 
        // and then listen to change event and show/hide them 
        $('#countryName').on('change', function() { 
         var val = $(this).val(); 
         $('option', $statesSelect).detach(); 
         $states.each(function() { 
          $(this).is('[data-country="' + val + '"').appendTo($statesSelect); 
         }); 
        }); 
    }); 
    
    相關問題