如何使用AJAX和PHP更新表单选项

Question

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

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

我想创建两个表单选择：1具有类型选择（'type1'，'type2'等），第二个具有值选择（'AA'，'AB'等），但我想要该值选择以根据第一个选择自动更改选项。

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

有人可以为我提供动态填充第二个表单选择所需的AJAX和其他代码吗？

为了向您展示ive尝试了什么，以下是到目前为止编写的ive代码：

输入单元格：

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

Java脚本

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

UtilitiesController：

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

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

Answer 1

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

请访问此处以获取工作示例。

我希望这是有帮助的：

<!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>";
            }
        }
    }
?>

Answer 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>

如何使用AJAX和PHP更新表单选项

问题描述

2 个解决方案

解决方案1
0 2013-04-15 18:32:49

解决方案2
0 2013-04-16 17:39:05

如何使用AJAX和PHP更新表单选项

问题描述

2 个解决方案

解决方案1 0 2013-04-15 18:32:49

解决方案2 0 2013-04-16 17:39:05

解决方案1
0 2013-04-15 18:32:49

解决方案2
0 2013-04-16 17:39:05