php - 如何使用更改其他选项的下拉列表创建表单，具体取决于选择

Question

我正在尝试使用下拉列表创建表单，当您从下拉列表中选择一个元素时，该下拉列表可以动态显示不同的选项。

例如，如果您有一个国家下拉列表和另一个州下拉列表，当用户从国家下拉列表中选择美国时，州下拉列表应更改为显示美国各州。如果用户选择 Canada ，它应该在 states 下拉列表中显示 Canadian states。

我希望我的解释很清楚，很抱歉。

我需要一个针对 cakePHP 的特定解决方案，而另一个线程没有回答和解决更新版本的 CakePHP。

Answer 1

将数组从 Cake 转换为 Javascript：

<script language="javascript">
var pdcs = new Array();


<?php foreach($districts as $d_id => $d_name):
    echo 'pdcs['.$d_id.'] = new Array();';
    echo 'pdcs['.$d_id.'][0] = new Array(';
    if(!empty($project_duty[$d_id])):
        $last_key = end(array_keys($project_duty[$d_id]));
        foreach($project_duty[$d_id] as $code_id => $code):
            if($code_id != $last_key)
            {
                echo '\''.$code.'\',';
            } else {
                if(empty($project_duty['all']))
                {
                    echo '\''.$code.'\'';
                } else {
                    echo '\''.$code.'\',';
                }
            }
        endforeach;
    endif;
    echo ');';

    echo 'pdcs['.$d_id.'][1] = new Array(';
    if(!empty($project_duty[$d_id])):
        foreach($project_duty[$d_id] as $code_id => $code):
            if($code_id != $last_key)
            {
                echo '\''.$code_id.'\',';
            } else {
                if(empty($project_duty['all']))
                {
                    echo '\''.$code_id.'\'';
                } else {
                    echo '\''.$code_id.'\',';
                }
            }
        endforeach;
    endif;
    echo ');';
endforeach;?>
</script>

创建一些函数来实际更改下拉列表中的数据。这里最后的函数 changeList 将清空该框，选择我们之前创建的数组之一，然后将其填满。

<script language="javascript">

// This function goes through the options for the given
// drop down box and removes them in preparation for
// a new set of values

function emptyList( box ) {
    // Set each option to null thus removing it
    while ( box.options.length ) box.options[0] = null;
}

// This function assigns new drop down options to the given
// drop down box from the list of lists specified

function fillList( box, arr ) {
    // arr[0] holds the display text
    // arr[1] are the values

    for ( i = 0; i < arr[0].length; i++ ) {

        // Create a new drop down option with the
        // display text and value from arr

        option = new Option( arr[0][i], arr[1][i] );

        // Add to the end of the existing options

        box.options[box.length] = option;
    }

    // Preselect option 0

    box.selectedIndex=0;
}

// This function performs a drop down list option change by first
// emptying the existing option list and then assigning a new set

function changeList() {
    // Isolate the appropriate list by using the value
    // of the currently selected option
    box = document.getElementById('TrooperActivityDistrictWorked');
    var boxValue = box.options[box.selectedIndex].value;
    //list = lists[box.options[box.selectedIndex].value];
    pdc = pdcs[boxValue];
    // Next empty the slave list
    slave = document.getElementById('TrooperActivityProjectDuty');
    emptyList( slave );

    // Then assign the new list values

    fillList( slave, pdc );
}
</script>

调用 javascript 函数的下拉菜单：

<?php echo $this->Form->input('district_worked', array('label' => '','options' => $districts,'title' => 'Select district daily was worked in', 'empty' => 'Please Choose a Type', 'onchange' => 'changeList()')); ?>

根据所选内容更改的下拉列表：

<?php echo $this->Form->input('project_duty', array('label' => '','options' => '', 'empty' => '(choose one)')); ?>

这只是最近的一个例子，让我知道我是否可以对此进行扩展。

Answer 2

一旦第一个选择被更改，您需要使用 Javascript 来更改第二个选择的内容。

一个使用 jQuery 的简单示例：

$(function(){
    $("select#selectOne").change(function(){
       // Load options into select two depending on value of select 1
       var currentValue = $(this).find('option:selected').val();
       // here you can decide what to load, you could use Ajax etc
       $('select#selectTwo').empty().append($("<option>something</option>");
    });
})

Answer 3

我正在尝试为 cakePHP 找到一个特定的解决方案，但我被欺负而不是得到一个好的答案。经过大量搜索，我发现这篇很棒的博客文章正好解决了我的问题。 http://blog.jandorsman.com/2011/01/using-ajax-and-cakephp-to-dynamically-populate-select-form-fields/

如果您使用的是更新版本的 CakePHP。你需要使用不同的功能 JS helper

    $this->Js->get('#BookId')->event(
    'change',
    $this->Js->request(
        array('controller'=>'Books','action'=>'your_ajax_function'),
        array('update' => '#BooksAuthorId', 'dataExpression' => true, 'data' => '$("#BookId").serialize()')
    )
); 

上面的代码不会生成 javaScript 代码。它只会缓存它。您需要在视图文件的末尾执行此函数以生成代码。

<?php echo $this->Js->writeBuffer(); ?>