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

我有一个像这样的二维数组:

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

我想创建两个表单选择:1有类型选择('type1'， 'type2'等)和第二个是值选择('AA'， 'AB'等)，除了我想值选择自动改变选项取决于第一个选择。

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

UtilitiesController:

public function updateInput($value = 0)
{
    $signalTypeOptions = $model::$signalTypeOptions;
    $this->set('options', $signalTypeOptions);
}

这是我的答案-它使用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>";
            }
        }
    }
?>

这是适合我情况的解决方案。我使用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>

相关内容

最新更新

热门标签：