從另一個選擇框中動態填充選擇框的值

我有兩個選擇選項Countries和States。使用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來獲得選擇Country的States功能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或者有更好的主意比這，請不要的份額。

謝謝！

來源

2017-06-02 Rajendra Purant

您應該使用Ajax爲，結合它調用一個'。對（ '變'）'事件。 – doutriforce

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

我建議通過閱讀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這應該讓你到終點線。 –

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

使用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); 
     }); 
    }); 
});

來源

2017-06-02 20:45:18 Philipp

從另一個選擇框中動態填充選擇框的值

回答

相關問題