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

Question

So i have a two dimensional array like this one: 所以我有一个像这样的二维数组：

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

I want to create two form selections: 1 having the type selection ('type1', 'type2', etc.) and the second being the value selection ('AA', 'AB', etc.), except i want the value selection to automatically change options depending on the first selection. 我想创建两个表单选择：1具有类型选择（'type1'，'type2'等），第二个具有值选择（'AA'，'AB'等），但我想要该值选择以根据第一个选择自动更改选项。

I'm using PHP and the values are strictly from an array (not from a database). 我正在使用PHP，其值严格来自数组（而不是数据库）。

Could someone help me with the AJAX and other code necessary to dynamically populate the second form selection? 有人可以为我提供动态填充第二个表单选择所需的AJAX和其他代码吗？

To show you what ive tried, heres the code ive written so far: 为了向您展示ive尝试了什么，以下是到目前为止编写的ive代码：

input cells: 输入单元格：

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

Javascript 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: UtilitiesController：

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

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

Answer 1

here is my answer - it uses jQuery, AJAX and PHP. 这是我的答案-它使用jQuery，AJAX和PHP。

please visit here for a working example. 请访问此处以获取工作示例。

I hope this is helpful: 我希望这是有帮助的：

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

and then save the following as ajax.php : 然后将以下内容另存为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

Heres the solution that worked for my situation. 这是适用于我的情况的解决方案。 Im using cakePHP,javascript, JSON, and AJAX. 我正在使用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