Studyon Minte9.com
jQuery




Two select related



When I change County, populate City select.



<form method="post" action ="">                        
<select name="filter[id_location_county]" id="filter-id_location_county">
<option>Arad</option>
<option>Bacau</option>
</select>

<select name="filter[id_location_city]" id="filter-id_location_city" disabled="disabled">
    <option value="" label="Localitate">Localitate</option>
</select> 
</form>


<script type='text/javascript'>
$('document').ready(function(){
    
    var id_judet = $('select#filter-id_location_county option:selected').val();

    if(id_judet >= 0) {

        var id_city = '<?php echo $this->cityId;?>';
        
	$('#filter-id_location_city').removeAttr('disabled');
        $('#uniform-filter-id_location_city').removeClass('disabled');
         
       $.get("/api/frontend/get-cities/id_judet/"+id_judet, function (data){
            var obj = jQuery.parseJSON(data);
            $.each(obj, function(key, val) {
                if(id_city && val['id'] == parseInt(id_city) ) {
                    $('#filter-id_location_city').append($("<option></option>").attr("value",val['id']).attr("selected","selected").text(val['title']));
                    $('#filter-id_location_city').prev().html(val['title']);
                    
                } else {
                    $('#filter-id_location_city').append($("<option></option>").attr("value",val['id']).text(val['title']));
                }
            });
       });
    }
}
</script>