|  |  | 
            
              | list menu 
         <td align="right"><label>ยี่ห้อ : </label></td>
        <td>
        <select id="selBrand" name="selBrand">
            <option value=""> ------- เลือก ------ </option>
            <?php
                $result = mysql_query("
                    SELECT
                        brand_id,
                        brand_name
                    FROM 
                        brand
                    ORDER BY brand_id ASC;
                ");
                
                while($row = mysql_fetch_assoc($result)){
                    echo '<option value="', $row['brand_id'], '">', $row['brand_name'],'</option>';
                }
            ?>
        </select>
        </td>
	<td width="16%" align="right"><label>รุ่น : </label></td>
    <td>
    <select id="selClass" name="selClass">
    	<option value=""> ------- เลือก ------ </option>
    </select><span id="waitClass"></span>
    </td>
</tr>
 script
 
 <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>
 |  
              | 
 ประวัติการแก้ไข
 2013-04-12 10:20:36
 
                
                  |  |  |  |  
                  |  | 
                      
                        | Date :
                            2013-04-12 10:20:14 | By :
                            lookpla26 |  |  |  
                  |  |  |  |  |  |  |