从另一个选择框中动态填充选择框的值

我有两个选择选项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

从另一个选择框中动态填充选择框的值

回答

相关问题