php下拉菜单填充答案

【问题标题】：php dropdown menu populationphp下拉菜单填充
【发布时间】：2010-10-06 01:16:06
【问题描述】：

我正在尝试编写一个 php 脚本，该脚本将根据主下拉菜单的选择填充第二个下拉菜单。我想使用 jquery 来做所有非页面刷新的事情。但是我发现那里存在的每一件事都很难理解和修改，你知道有什么写得很好而且很容易理解的东西吗？或者那里有教程吗？

【问题讨论】：

标签： php jquery drop-down-menu

【解决方案1】：

这里有一些代码可以让你知道你想做什么：

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】：

网上有很多关于如何做到这一点的例子，一个很好的例子here来自 Remy Sharp 在他的博客上 (full example here)

基本上，您所做的是调用服务器上的 PHP 页面，并在更改时使用您的第一个下拉列表的值。例如，如果您的第一个下拉列表是美国的州列表，那么您的第二个下拉列表可能会显示所选州的城市。当第一个下拉菜单被选中时，onChange 事件会触发对服务器上 PHP 页面的请求，并传递状态名称 (example.com/city_lookup.php?state=NY)

JQuery 然后接收来自city_lookup 脚本的响应（JSON encoded 可能是最好的方法），然后循环遍历它并将值写入您的第二个下拉菜单。

【讨论】：

【解决方案3】：

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

});

【讨论】：

【解决方案4】：

两种不同的方式：

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

【讨论】：