<script type="text/javascript">
// Specify a function to execute when the DOM is fully loaded.
$(function(){
var defaultOption = '<option value=""> ------- เลือก ------ </option>';
var loadingImage = '<img src="image/loading4.gif" alt="loading" />';
// Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#selBrand').change(function() {
$("#selClass").html(defaultOption);
$("#selType").html(defaultOption);
// Perform an asynchronous HTTP (Ajax) request.
$.ajax({
// A string containing the URL to which the request is sent.
url: "jsonAction.php",
// Data to be sent to the server.
data: ({ nextList : 'class', brand_id: $('#selBrand').val() }),
// The type of data that you're expecting back from the server.
dataType: "json",
// beforeSend is called before the request is sent
beforeSend: function() {
$("#waitClass").html(loadingImage);
},
// success is called if the request succeeds.
success: function(json){
$("#waitClass").html("");
// Iterate over a jQuery object, executing a function for each matched element.
$.each(json, function(index, value) {
// Insert content, specified by the parameter, to the end of each element
// in the set of matched elements.
$("#selClass").append('<option value="' + value.class_id +
'">' + value.class_name + '</option>');
});
}
});
});
$('#selClass').change(function() {
$("#selType").html(defaultOption);
$.ajax({
url: "jsonAction.php",
data: ({ nextList : 'type', classID: $('#selClass').val() }),
dataType: "json",
beforeSend: function() {
$("#waitType").html(loadingImage);
},
success: function(json){
$("#waitType").html("");
$.each(json, function(index, value) {
$("#selType").append('<option value="' + value.type_id +
'">' + value.type_name + '</option>');
});
}
});
});
});
</script>