使用cakephp和Jquery进行动态下拉

时间:2012-08-17 13:09:19

标签: jquery dynamic drop-down-menu input cakephp-2.2

大家都希望根据cakephp 2.2应用程序中的国家/地区选择生成城市的动态下拉菜单。我是cakephp的新手。另外我几乎找不到任何教程,因为它们主要用于1.3或1.2版本。我在配置文件添加视图中有国家和城市的下拉菜单。以下是我在Controller控制器中的代码:

  public function citylist() {
         $this->layout=false;
         Configure::write('debug', 0);
         if($this->request->is('ajax')){    
        $country=$this->Country->read(null, $this->request['url']['country_id']);
        $code=$country['Country']['country_code'];
        $cities=$this->Country->City->find('list',array('conditions' =>array('City.country_code' => $code),'recursive' => -1,'fields' => array('id', 'name')));
        $this->set('cities',$cities);
}}

我的jquery代码是这样的:

$(document).ready(function(){
$('#ProfileCountryId').live('change', function() {
if($(this).val().length != 0) {
  $.getJSON('/crush/countries/citylist',
              {country_id: $(this).val()},
              function(cities) {
                if(cities !== null) {
                  populateCityList(cities);
                }
    });
  }
});
});

      function populateCityList(cities) {
var options = '';

$.each(cities, function(index, city) {
options += '<option value="' + index + '">' + city + '</option>';
});
$('#ProfileHomeLocation').html(options);
$('#city-list').show();
}

我尝试进行更改,但它确实令人困惑,因为在diff示例中我看到非常不同的方式。 我不确定要将该请求类型检查为ajax还是应该通过request-&gt; data或params [url]来获取参数值。

我遵循了这两个现有的答案,这让我更加困惑。 cakephp pass dropdown value in ajax The connection was reset issue in CakePHP 2.2

第一次加载页面时出现错误很奇怪它在控制台中显示错误“无法加载资源:服务器响应状态为500(内部服务器错误)”。 但是,如果我加载重新加载,然后在下拉列表中选择第一个值。它给出了错误

  

获取http://example.com/crush/countries/citylist?country_id=103 500   (内部服务器错误)jQuery.ajaxTransport.sendjquery-1.7.2.js:8240   jQuery.extend.ajaxjquery-1.7.2.js:7719 jQuery.each.jQuery。(匿名   功能)jQuery的1.7.2.js:7245   jQuery.extend.getJSONjquery-1.7.2.js:7262(匿名   function)citylist.js:4 jQuery.event.dispatchjquery-1.7.2.js:3332   jQuery.event.add.elemData.handle.eventHandle

不知道该怎么做。

1 个答案:

答案 0 :(得分:0)

在像你这样的情况下,涉及动态下拉框,我使用ajax()jQuery方法来检索数据并替换select元素的整个内容。因此,您可以返回完整的HTML option元素,并使用select替换$('myselectelement').html(data)元素的内容,而不是通过AJAX调用返回JSON数据。这很好。