Cakephp选择依赖框在表单提交后为空

时间:2017-05-29 16:39:59

标签: jquery cakephp

我为所选州的城市设置了一个从属选择框。

工作正常!但在我提交表格后,城市选择框变空。

我想知道如何在提交表单后填充选择框。

我正在使用CakePHP 2.5。

我可以在表单提交后看到城市选择框值,我不知道如何在表单提交后再次填充。

 if ($this->request->is('ajax')); 
 {

            $this->set('stateCities', $this->request->data['stateCities']);
 }  


//controller
public function getCitiesByStateAjax()
{

    $this->autoRender   = false;
    $this->autoLayout   = false;

    $city_id = $this->data['city'];

    $this->loadModel('city');
    $citiesList = $this->UsuarioSimulador->listCitys( $city );

     $citiesList = Hash::combine(
        $citiesList, '{n}.city.id', array('%s', '{n}.city.name')
    );

    echo json_encode($citiesList);

}


 //form 

debug($estateCities);

echo $this->Form->input('City.city', array('label'=>'City',  
                                                    'type' => 'select', 
                                                    'empty'=>'- select one -', 
                                                    'options' => $stateCities, 
                                                    'data-webroot' => $this->webroot)
                        );

//Ajax javascript code :
    $(function() {

        $(document).on('change', "select#State", function()
        {
            var url = '<?php echo Router::url(array('controller' => 'cities', 'action' => 'getCitiesByStateAjax'));?>';

            var data = {
                State: $(this).val()
            };

            $.ajax({

                url: url,
                method: 'POST',
                data: data,
                dataType: 'json',

                beforeSend: function( xhr ) {
                    $.blockUI({
                        message: '<h2>Search</h2>'
                    });
                },
                complete: function () {
                    $.unblockUI();
                },
                success: function ($response, a, b) 
                {
                    if(b.status == 200) {
                        var $optionsCity = $("#Cities").html($("<option />").val('').text('- select -'));

                        if($response) {
                            $optionsCity.prop("disabled", false);

                            $.each($response, function(idestate, value) {
                                var $opt = new Option(value, idestate);

                                $optionsCity.append($opt);
                            });
                        } else {
                            $optionsCity.prop("disabled", true);
                        }

                    } else {
                        alert($response);
                    }
                },
                error: function(x, t, m) {
                    var msg = 'Ocorreu um erro inesperado. ';

                    if( t === "timeout" ) {
                        msg += "Aguarde 30 segundos e tente novamente!";
                    } else {
                        msg = t;
                    }

                    alert( msg );
                }
            });
        });        

1 个答案:

答案 0 :(得分:0)

我不知道Cake Framework,但我会告诉你应遵循的逻辑。

首先,在你的控制器中,你必须返回一个多维数组,其中包含城市的idvalue

$cities = array
(
    array('id' => 1, 'value' => 'London'),
    array('id' => 2, 'value' => 'Rio de Janeiro'),
    array('id' => 3, 'value' => 'Berlin')
);

echo json_encode($cities);

其次,由于返回是JSON,您需要在javascript文件中解析它。

var json = JSON.parse(response);

最后,你所要做的就是循环。

var html = '';

$.each(json, function(i, city)
{
    html += '<option value="' + city.id + '">';
    html +=     city.value;
    html += '</option>';
});

$('#cities').html(html);