如何使用 AJAX 和 php 更新表单选项答案

【问题标题】：How do you update form options using AJAX and php如何使用 AJAX 和 php 更新表单选项
【发布时间】：2013-04-07 20:06:03
【问题描述】：

所以我有一个像这样的二维数组：

$types = array(
    'type1' => array('AA', 'AB', 'AC'),
    'type2' => array('BA', 'BB', 'BC')
);

我想创建两个表单选择：1 具有类型选择（'type1'、'type2' 等），第二个是值选择（'AA'、'AB' 等），除了 i希望值选择根据第一个选择自动更改选项。

我正在使用 PHP，并且这些值严格来自数组（而不是来自数据库）。

有人可以帮助我处理动态填充第二个表单选择所需的 AJAX 和其他代码吗？

为了向您展示我尝试了什么，这里是我到目前为止编写的代码：

输入单元格：

$settingCell = $this->Widget->input('sigtypes', array('id' => 'type', 'label' => '', 'options' => array_keys($model::$signalTypeOptions)));
$settingCell .= $this->Widget->input('sigtypevalues', array('label' => '', 'options' => $options));

Javascript

$this->Js->get('#type')->event('change',
    $this->Js->request(
            array('controller'=>'utilities','action'=>'updateInput'),
            array('update' => '$("#options")', 'dataExpression' => true, 'data' => '{value: $this.value}')));

实用程序控制器：

public function updateInput($value = 0)
{
    $signalTypeOptions = $model::$signalTypeOptions;

    $this->set('options', $signalTypeOptions);
}

【问题讨论】：

你能告诉我们你尝试了什么吗？这不是一个二维数组。
好的，它是一个数组的映射，但它仍然是数组中的一个数组，所以我认为它是 php 的二维数组。我没有尝试太多，因为我对 ajax 真的很陌生，而且我真的不懂语法
我正在努力解决这个问题。

标签： php ajax forms multidimensional-array

【解决方案1】：

这是我的答案 - 它使用 jQuery、AJAX 和 PHP。

请访问 here 获取工作示例。

我希望这会有所帮助：

<!DOCTYPE html>
<html>
    <head>
        <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
        <script type="text/javascript">
            $(document).ready
            (
                function()
                {
                    $('#select1').change
                    (
                        function()
                        {
                            value = $('#select1').val();
                            $.ajax  ({
                                        type: 'GET',
                                        url: 'ajax.php?type='+value,
                                        data: value,
                                        success: function(result)
                                        {
                                            $('#select2').html(result);
                                        }
                                    });
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <form id="form1" name="form1">
        <select id="select1" name="select1">
            <option value="">Please select a type..</option>
            <?php
                include('ajax.php');
                foreach($types as $type => $values)
                {
                    echo "<option value=\"$type\">$type</option>";
                }
            ?>
        </select>
        <select id="select2" name="select2" />
    </form>
    </body>
</html>

然后将以下内容另存为ajax.php:

<?php
    $types = array(
        'type1' => array('AA', 'AB', 'AC'),
        'type2' => array('BA', 'BB', 'BC')
    );
    if(isset($_GET['type']))
    {
        $type = $_GET['type'];
        if(array_key_exists($type, $types))
        {
            foreach($types[$type] as $arrayValue)
            {
                echo "<option>$arrayValue</option>";
            }
        }
    }
?>

【讨论】：

【解决方案2】：

这是适合我情况的解决方案。我正在使用 cakePHP、javascript、JSON 和 AJAX。

<?php
$ajaxRequest = $this->Js
    ->request(
           array('controller' => 'Features', 'action' => 'edit'), 
           array('method' => 'get', 'success' => 'changeSelection()') );

$this->Js->buffer( $this->Js->get('#typeSelect')->event('change', $ajaxRequest));
?>

<script>
function changeSelection()
{
var value = $('#typeSelect').val(); // get the value selected in the first dropdown
var div = document.getElementById('sigType'); //div id is sigType
div.innerHTML = '';

    if(value >= 1 && value <= 3) // specifics for my situation, not important
    { 
        //get the array from php, convert to JSON and echo it for use in javascript
        var signalTypeOptions = <?php echo json_encode(array_values($signalTypeOptions) ); ?>;
        var selection = document.createElement('select'); // create the second dropdown

        div.appendChild(selection); // add the second dropdown to the division
        var i = 0;
        // loop through the array to fill the dropdown
        for(optionText in signalTypeOptions[value]) 
        {
            var option = document.createElement('option');
            option.innerHTML = optionText;
            option.value = i;
            i++;
            selection.appendChild(option); // add the option to the dropdown
        }
    }
}
</script>

【讨论】：