如何在yii框架中使用Ajax请求更新下拉列表?

时间:2013-12-07 19:28:24

标签: ajax yii ajax-request

我有2个dropDownList 第一个dropDownList是Hour 第二个dropDownList是Minute,依赖于Hour

示例 如果选择小时框8分钟框有30 - 60 如果选中小时框13分钟框有00 - 60

我使用了ajax请求但没有工作。

代码显示在下面

的index.php

<?php
$this->breadcrumbs=array(
    'Book',
);
?>

<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'test',
    'type'=>'horizontal',
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
)); ?>

    <div class="row">

        <?php
        echo $form->dropDownList( $model, 'C_time',$this->HH(), array( 'empty' => 'Select Hour ',
                'ajax' => array(
                    'type'=>'POST',
                    'url'=>CController::createUrl('CustomersController/MM'),
                    'update'=>'#Minute',
                    'data'=>array('hour' => 'js:this.value'),
                ),
            )
        );
        echo CHtml::dropDownList('Minute','', array('empty'=>'Select Minute'));
        ?>
    </div>

<?php $this->endWidget(); ?>

CustomerController

public function actionIndex()    {
    $model = new Customers();        
    $this->render('index',array('model'=>$model));
}

public function HH()
{
    $r_model = new Restaurant();
    $par1 = 'HOUR';
    $par2 = 'R_open';
    $open = $r_model->getTime($par1,$par2);
    $par2 = 'R_close';
    $close = $r_model->getTime($par1,$par2);
    $rs = array();
    for ($i = $open; $i < $close; $i++){
        $rs[$i] = $i;
    }
    return $rs;
}

public function actionMM()
{
    if(isset($_POST['hour']) && $_POST['hour']!=''){
        $this->render('test');
        $hour=$_POST['hour'];
        $r_model = new Restaurant();
        $start = '00';
        $end = '60';
        if($hour == $r_model->getTime('HOUR','R_open')){
            $par1 = 'MINUTE';
            $par2 = 'R_open';
            $open = $r_model->getTime($par1,$par2);
            $start = $open;
        }
        elseif($hour == $r_model->getTime('HOUR','R_close')){
            $par1 = 'MINUTE';
            $par2 = 'R_close';
            $close = $r_model->getTime($par1,$par2);
            $end = $close;
        }
        $rs = array();
        for ($i = $start; $i < $end; $i++){
            $rs[$i] = $i;
        }
        echo CHtml::tag('option',array('value' => ''),
            CHtml::encode('Select User Type'),true);
        foreach($rs as $id)
        {
            echo CHtml::tag('option',
                array('value' => $id),CHtml::encode($id),true);
        }
    }
}

1 个答案:

答案 0 :(得分:0)

你不需要ajax!

首先使用所有选项进行首次下拉,然后使用空选项进行第二次下拉(分钟),

然后根据第一个下拉列表,填写第二个下拉列表,如:

<div class="row">
    <?php
    echo $form->dropDownList( 
             $model, 'C_time',$this->HH(), array( 'empty' => 'Select Hour ',
             'id' => 'drpHour', // give it an id so we can select it
        )
    );
    echo CHtml::dropDownList('Minute','', $data , array('empty'=>'Select Minute', 'id' => 'drpMinute'));
    ?>
</div>

<script>
 $(document).ready(function(){
       $('#drpHour').change(function(){ // depending on your logic, fill the second drop down
             if($('#drpHour').val() > 13){
                  $('#drpMinute').append('<option value="30" >30</option>');// and fill the rest
             ...
             }
             else{ ... }

       });

 });
相关问题