如何使用Ajax在Cakephp中根据国家/地区选择州？

Question

如何使用Ajax在Cakephp中根据国家/地区选择州？

我想根据所选国家/地区添加州列表。 例如，如果印度

被选中，然后印度州出现在州下拉列表中。

它不起作用。当我要根据国家/地区选择州时。

请帮助我。下面是我的编码

在控制器中

 <?php App::uses('AppController', 'Controller'); class VenuesController extends AppController { public $uses = array('State','Country','Venue','Facility','User','Image'); public $components = array('Custom'); ##################add state############################## public function state() { if($this->RequestHandler->isAjax()) { $this->layout = 'ajax'; $countryid=$this->request->data('country_id'); $selectstate = $this->State->find('list', array('fields' => array('state_name'), 'conditions' => array('State.country_id' => $countryid))); $this->set('selectbox',$selectstate); //pr($selectstate); } } } 

 in ctp file <script> $.noConflict(); </script> <link href="<?php echo HTTP_ROOT;?>css/jquery.validate.css" rel="stylesheet" type="text/css" /> <script src="<?php echo HTTP_ROOT;?>js/jquery.min.1.8.3.js" type="text/javascript"></script> <script src="<?php echo HTTP_ROOT;?>js/jquery.validate.js" type="text/javascript"></script> <script src="<?php echo HTTP_ROOT;?>js/jquery.validation.functions.js" type="text/javascript"></script> <link href="<?php echo HTTP_ROOT;?>css/admin/AdminLTE.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function showFields(id) { alert(id); //alert("hello"); dataString="country_id="+id; alert(dataString); $.ajax({ url: "venues/state", type: "POST", data: dataString,//alert(data); success: function(data) { $('#result').html(data); }, }); } </script> <section class="content-header"> <h1> Add Venue </h1> <ol class="breadcrumb"> <li><a href="http://localhost/locatevenue/users"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active">Add Venue</li> </ol> </ section> <!-- Main content --> <section class="content"> <div class="row"> <!-- left column --> <?php echo $this->Session->flash('success_message') ?> <div class="col-md-61"> <!-- general form elements --> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">Add Venue</h3> </div> <div style="width:49%; float:left;"> <?php echo $this->Form->create('Venue' ,array('id' =>'myform' ,'name' => 'myform','enctype'=>'multipart/form-data')); ?> <div class="box-body"> <div class="form-group"> <?php echo $this->Form->input('country', array('onChange'=>'showFields(this.value)','class'=>'form-control','id' =>'country','type' => 'select','label'=>true,'label'=>'country:','options' => $country ,'empty' => 'Select A Country','required'=>'false')); ?> </div> <div class="form-group"> <div id="result"> <?php echo $this->Form->input('state', array('class'=>'form-control','id' =>'state','type' => 'select','label'=>true,'label'=>'state:','options' => $state ,'empty' => 'Select A State','required'=>'false')); ?> </div> </div> <!--<div id="state"></div>--> </div> </div> <!-- /.box-body --> </div> </div> </div> </section> 

Answer 1

在您的操作中，仅列出列表并将ID发送给视图，并生成如下选项：

查看文件以进行state操作

<option value="">Select One</option>
<?php
foreach($selectbox as $key => $value) {
   echo "<option value='".$key."'>".$value."</option>";
}
?>

生成具有ID的选择字段-

echo $this->Form->input('state', array('class'=>'form-control','id' =>'state','type' => 'select','label'=>true,'label'=>'state:','options' => $state ,'empty' => 'Select A State','required'=>'false'));  ?>

现在是Ajax success一部分-

   $.ajax({
        url: "venues/state",
        type: "POST",
        data: dataString,//alert(data);
        success: function(data)
         {     
            $('#state').html(data);
         },
    });

希望它能解决问题。

Answer 2

请在您的获取状态列表中的控制器或模型中回显您的结果。然后尝试在成功功能中提醒数据。 像选择下拉菜单一样格式化代码

<option value="<?php echo state_id;?>"><?php echo $state_name;?></option>

根据cake php进行更改。