我为所选州的城市设置了一个从属选择框。
工作正常!但在我提交表格后,城市选择框变空。
我想知道如何在提交表单后填充选择框。
我正在使用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 );
}
});
});
答案 0 :(得分:0)
我不知道Cake Framework,但我会告诉你应遵循的逻辑。
首先,在你的控制器中,你必须返回一个多维数组,其中包含城市的id
和value
:
$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);