php下拉菜单填充

我正在尝试编写一个php脚本，它将根据主下拉菜单的选择填充第二个下拉菜单。我想使用jquery来完成所有非页面刷新的工作。但我发现存在的每一件事都很难理解和修改，你知道有哪些东西写得很好，很容易理解，或者可能有一个教程存在吗？

两种不同的方式：

使第一级触发AJAX查询，返回第二级所需的数据 编写一个包含所有可能选择所需数据的树结构，并将其隐藏在初始页面中Javascript可以读取的某个位置。完成的HTML菜单可以根据需要隐藏和显示，也可以在JS部分的一个大JSON对象中显示。

---

在网上有很多这样做的例子，雷米·夏普在他的博客上有一个很好的例子

基本上，您所做的是在服务器上调用一个PHP页面，每当它发生更改时，使用第一个下拉列表的值。例如，如果您的第一个下拉列表是美国各州的列表，那么您的第二个下拉列表可能会显示所选州的城市。选择第一个下拉列表时，它的onChange事件将向服务器上的PHP页面发出请求，并传递状态名example.com/city\u lookup.PHP？state=NY

---

JQuery然后从city_lookup脚本接收响应，这可能是最好的方法，然后循环使用它并将值写入第二个下拉菜单。

以下是一些代码，可以让您了解您想要做什么：

HTML

PHP

jQuery

再添加一行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'
        );
    });

});

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

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

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'
        );
    });

});

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'
        );
    });

});