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

Question

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

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

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

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

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

在 Controller 中

<?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 发送到 View 并生成类似 -

查看文件以执行状态操作

<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 成功 部分 -

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

希望它能起到作用。