Feature

Google+ Badge

Thursday, November 22, 2012

jquery combobox with json

ok, lets start how to make jquery combobox and json without plugin to make fastest process, it seems i have to learn a new thing each time i start project. anyway, i’m trying to learn before but it fail cause i’m so lowly about understanding jquery function and implementation.
Now, the basic things you want to do with said select statement:
1. Get the value of the selected item in the province combobox.
2. clear the value option in the region combobox.
3. add new value by the province

and now we will to make combobox about province and region,, in the indonesia we have many province that have many regions too. and we  have a combobox id
member_province  data like this :

<select name=”member_province” id=”member_province”>
                     <option selected=”selected” value=”34″>-</option>  
                      <option value=”5″>Yogyakarta</option>
</select>

and how jquery to load  json data ???
jquery have a function to read json data :  getJSON

$(document).ready(function(){
$(“#member_province”).click(function(event){
if($(this).val()!=”){
$(“#member_region”).empty();
$.getJSON(“http://toespconer.wordpress.com/regionbyprovince/”+$(this).val(), function(data) {
$.each(data, function(key, val) {
$(“#member_region”).append(” + val.region_name + ”);
});
});
}
});
});

and when we select yogyakarta province we have a result json like this :

{"region_id":"3","region_name":"Kota Yogyakarta","province_id":"5","region_date":"2012-05-07 09:22:47"},{"region_id":"4","region_name":"Sleman","province_id":"5","region_date":"2012-05-07 09:22:47"}]
and combobox region will automaticly change the value :