# jQuery ajax chain select dropdown address country, states, city

**URL:** <https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584>\
**Category:** Need Help\
**Created:** [April 3, 2020, 7:48am UTC](https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584 "2020-04-03T07:48:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![arizzoye](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@arizzoye](https://discourse.cakephp.org/u/arizzoye)\
**Post date:** [April 3, 2020, 7:48am UTC](https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584/1 "2020-04-03T07:48:53Z")

</div>

I want to choose chain select dropdown to get addres, while user select option country Indonesia then display select option state Jakarta, or user select country Malaysia then display select state Sabah.

below table MySQL

```auto
Countries table
+--ID--+----Negara----+
| 1 | Indonesia |
| 2 | Malaysia |
+------+--------------+

States table
+--ID--+---countrie_id---+---Provinsi----+
| 1 | 1 | Jakarta |
| 2 | 1 | Bali |
| 3 | 2 | Sabah |
| 4 | 2 | Serawak |
+------+-----------------+----------------+

```

the result that I want is below

```auto
select options countries

<select name="countries">
  <option>Indonesia</options>
</select>

select options states

<select name="states">
   <option>Jakarta</option>
   <option>Bali</option>
</select>

```

controller Countries

```auto
public function index(){
  $negara = $this->Countries->find('all')->extract('Negara');
  $this->set(compact('negara'));
}

public function getCountries(){
  $negara = $this->Countries->find('all')->extract('Negara');
    
  return $this->response
    ->withType('application/json')
    ->withStringBody(json_encode([
      'jQueryNegara' => $negara,
      'result' => $result
    ]));
}

```

controller States

```auto
public function index(){
  $provinsi = $this->States->find('all')->extract('Provinsi');
  $this->set(compact('provinsi'));
}

public function getStates(){
  $provinsi = $this->Countries->find("all")->extract('Provinsi');
    
  return $this->response
    ->withType('application/json')
    ->withStringBody(json_encode([
      'jQueryProvinsi' => $provinsi,
      'result' => $result
    ]));
}

```

The form input cities add.ctp

```auto
<?= $this->Form->control('countrie_id', [
  'type' => 'select',
  'id' => 'jQueryNegara',
  'options' => $negara 
]); ?>

<?= $this->Form->control('province_id', [
  'type' => 'select',
  'id' => 'jQueryProvinsi',
  'options' => $provinsi 
]); 
?>

```

the jQuery ajax inside cities add.ctp

```auto
$(function(){
  $('#negara').on('change', function() {
    var id = $(this).val();
    var targeturl = '<?= Router::url(["controller"=>"countries","action"=>"getCountries"]); ?>';
    if(id == '-1'){
      $('#provinsi').html(`<option value="-1">Select State</option>`);
    }else{
      $("#divLoading").addClass('show');
	    $('#provinsi').html(`<option value="-1">Select State</option>`); 	
		  $.ajax({
              type:'post',
              url: targeturl,                  
			  data:'id='+id+'&type=state',
			  dataType: 'json',
			  success:function(result){
				  $("#divLoading").removeClass('show');
				  $('#provinsi').append(result);
			  }
		  });	
	  }
	});
}); 

```

I have try repeat and fix at bug, but still doesn’t work.  
Thanx for someone that want to help me

---

<div class="post-metadata">

**Author:** ![dreamingmind](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/dreamingmind/32/1857_2.png) [@dreamingmind](https://discourse.cakephp.org/u/dreamingmind)\
**Post date:** [April 3, 2020, 3:53pm UTC](https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584/2 "2020-04-03T15:53:32Z")

</div>

what error are you seeing?

---

<div class="post-metadata">

**Author:** ![arizzoye](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@arizzoye](https://discourse.cakephp.org/u/arizzoye)\
**Post date:** [April 3, 2020, 9:35pm UTC](https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584/3 "2020-04-03T21:35:35Z")

</div>

jQuery AJAX doesn’t worked at select options isn’t collected based on countrie\_id but display all

```auto
<select name="states">
  <option>Jakarta</option>
  <option>Bali</option>
  <option>Sabah</option>
  <option>Serawak</option>
</select>

```

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [April 4, 2020, 3:45am UTC](https://discourse.cakephp.org/t/jquery-ajax-chain-select-dropdown-address-country-states-city/7584/4 "2020-04-04T03:45:43Z")

</div>

You realize that your Ajax is calling the `getCountries` function, not `getStates`? And that neither of those functions is looking at whatever data might be passed to them?