如何使用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>

最佳答案

在您的操作中,仅列出列表并将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);
         },
    });


希望它能解决问题。

07-28 02:46
查看更多