จากเรื่องที่แล้ว ฐานข้อมูลระดับจังหวัด อำเภอ ตำบล และ ใส่ฟิลเตอร์ให้ select box มาต่อด้วยการสร้างฟอร์ม ไปใช้ส่งข้อมูล
เป็นธรรมดาที่การกรอกข้อมูลส่วนตัว ประวัติต่างๆ อาจจะต้องการหลายที่อยู่ เช่น ที่อยู่ตามทะเบียนบ้าน ที่อยู่ปัจจุบัน ที่ทำงาน ถ้าต้องมากำหนดตัวกรองให้ select box ที่ละตัวก็เสียเวลา แก้ได้โดยเปลี่ยนไปใช้ class แทน id และใช้ attribute data- แทนแต่ละกลุ่ม และใช้ ajax ดึงข้อมูลมาทำ chained เวลาที่เปลี่ยนตัเลือกในตัวแม่ ให้ใช้เอแจ็กซ์ดึงข้อมูลที่เกี่ยวข้องมาแสดง update แทนตัวเลือก option ตัวลูกที่มีอยู่เดิม
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX jQuery.chosen By Pitt Phunsanit</title>
<link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<fieldset>
<legend>บ้าน</legend>
<select name="home_province" class="areasProvince chosen-select" data-area="home" style="width:200px;">
<option value="64">กระบี่</option>
<option value="1">กรุงเทพมหานคร</option>
<option value="56">กาญจนบุรี</option>
<option value="34">กาฬสินธุ์</option>
<option value="49">กำแพงเพชร</option>
<option value="28">ขอนแก่น</option>
<option value="13">จันทบุรี</option>
<option value="15">ฉะเชิงเทรา</option>
<option value="11">ชลบุรี</option>
<option value="9">ชัยนาท</option>
<option value="25">ชัยภูมิ</option>
<option value="69">ชุมพร</option>
<option value="45">เชียงราย</option>
<option value="38">เชียงใหม่</option>
<option value="72">ตรัง</option>
<option value="14">ตราด</option>
<option value="50">ตาก</option>
<option value="17">นครนายก</option>
<option value="58">นครปฐม</option>
<option value="36">นครพนม</option>
<option value="19">นครราชสีมา</option>
<option value="63">นครศรีธรรมราช</option>
<option value="47">นครสวรรค์</option>
<option value="3">นนทบุรี</option>
<option value="76">นราธิวาส</option>
<option value="43">น่าน</option>
<option value="77">บึงกาฬ</option>
<option value="20">บุรีรัมย์</option>
<option value="4">ปทุมธานี</option>
<option value="62">ประจวบคีรีขันธ์</option>
<option value="16">ปราจีนบุรี</option>
<option value="74">ปัตตานี</option>
<option value="5">พระนครศรีอยุธยา</option>
<option value="44">พะเยา</option>
<option value="65">พังงา</option>
<option value="73">พัทลุง</option>
<option value="53">พิจิตร</option>
<option value="52">พิษณุโลก</option>
<option value="61">เพชรบุรี</option>
<option value="54">เพชรบูรณ์</option>
<option value="42">แพร่</option>
<option value="66">ภูเก็ต</option>
<option value="32">มหาสารคาม</option>
<option value="37">มุกดาหาร</option>
<option value="46">แม่ฮ่องสอน</option>
<option value="24">ยโสธร</option>
<option value="75">ยะลา</option>
<option value="33">ร้อยเอ็ด</option>
<option value="68">ระนอง</option>
<option value="12">ระยอง</option>
<option value="55">ราชบุรี</option>
<option value="7">ลพบุรี</option>
<option value="40">ลำปาง</option>
<option value="39">ลำพูน</option>
<option value="30">เลย</option>
<option value="22">ศรีสะเกษ</option>
<option value="35">สกลนคร</option>
<option value="70">สงขลา</option>
<option value="71">สตูล</option>
<option value="2">สมุทรปราการ</option>
<option value="60">สมุทรสงคราม</option>
<option value="59">สมุทรสาคร</option>
<option value="18">สระแก้ว</option>
<option value="10">สระบุรี</option>
<option value="8">สิงห์บุรี</option>
<option value="51">สุโขทัย</option>
<option value="57">สุพรรณบุรี</option>
<option value="67">สุราษฎร์ธานี</option>
<option value="21">สุรินทร์</option>
<option value="31">หนองคาย</option>
<option value="27">หนองบัวลำภู</option>
<option value="6">อ่างทอง</option>
<option value="26">อำนาจเจริญ</option>
<option value="29">อุดรธานี</option>
<option value="41">อุตรดิตถ์</option>
<option value="48">อุทัยธานี</option>
<option value="23">อุบลราชธานี</option>
</select>
<select name="home_city" class="areasCity chosen-select" data-area="home" style="width:200px;">
</select>
</fieldset>
<fieldset>
<legend>ที่ทำงาน</legend>
<select name="office_province" class="areasProvince chosen-select" data-area="office" style="width:200px;">
<option value="64">กระบี่</option>
<option value="1">กรุงเทพมหานคร</option>
<option value="56">กาญจนบุรี</option>
<option value="34">กาฬสินธุ์</option>
<option value="49">กำแพงเพชร</option>
<option value="28">ขอนแก่น</option>
<option value="13">จันทบุรี</option>
<option value="15">ฉะเชิงเทรา</option>
<option value="11">ชลบุรี</option>
<option value="9">ชัยนาท</option>
<option value="25">ชัยภูมิ</option>
<option value="69">ชุมพร</option>
<option value="45">เชียงราย</option>
<option value="38">เชียงใหม่</option>
<option value="72">ตรัง</option>
<option value="14">ตราด</option>
<option value="50">ตาก</option>
<option value="17">นครนายก</option>
<option value="58">นครปฐม</option>
<option value="36">นครพนม</option>
<option value="19">นครราชสีมา</option>
<option value="63">นครศรีธรรมราช</option>
<option value="47">นครสวรรค์</option>
<option value="3">นนทบุรี</option>
<option value="76">นราธิวาส</option>
<option value="43">น่าน</option>
<option value="77">บึงกาฬ</option>
<option value="20">บุรีรัมย์</option>
<option value="4">ปทุมธานี</option>
<option value="62">ประจวบคีรีขันธ์</option>
<option value="16">ปราจีนบุรี</option>
<option value="74">ปัตตานี</option>
<option value="5">พระนครศรีอยุธยา</option>
<option value="44">พะเยา</option>
<option value="65">พังงา</option>
<option value="73">พัทลุง</option>
<option value="53">พิจิตร</option>
<option value="52">พิษณุโลก</option>
<option value="61">เพชรบุรี</option>
<option value="54">เพชรบูรณ์</option>
<option value="42">แพร่</option>
<option value="66">ภูเก็ต</option>
<option value="32">มหาสารคาม</option>
<option value="37">มุกดาหาร</option>
<option value="46">แม่ฮ่องสอน</option>
<option value="24">ยโสธร</option>
<option value="75">ยะลา</option>
<option value="33">ร้อยเอ็ด</option>
<option value="68">ระนอง</option>
<option value="12">ระยอง</option>
<option value="55">ราชบุรี</option>
<option value="7">ลพบุรี</option>
<option value="40">ลำปาง</option>
<option value="39">ลำพูน</option>
<option value="30">เลย</option>
<option value="22">ศรีสะเกษ</option>
<option value="35">สกลนคร</option>
<option value="70">สงขลา</option>
<option value="71">สตูล</option>
<option value="2">สมุทรปราการ</option>
<option value="60">สมุทรสงคราม</option>
<option value="59">สมุทรสาคร</option>
<option value="18">สระแก้ว</option>
<option value="10">สระบุรี</option>
<option value="8">สิงห์บุรี</option>
<option value="51">สุโขทัย</option>
<option value="57">สุพรรณบุรี</option>
<option value="67">สุราษฎร์ธานี</option>
<option value="21">สุรินทร์</option>
<option value="31">หนองคาย</option>
<option value="27">หนองบัวลำภู</option>
<option value="6">อ่างทอง</option>
<option value="26">อำนาจเจริญ</option>
<option value="29">อุดรธานี</option>
<option value="41">อุตรดิตถ์</option>
<option value="48">อุทัยธานี</option>
<option value="23">อุบลราชธานี</option>
</select>
<select name="office_city" class="areasCity chosen-select" data-area="office" style="width:200px;">
</select>
</fieldset>
<script src="../jQuery/jquery-2.1.3.min.js"></script>
<script src="chosen/chosen.jquery.min.js"></script>
<script>
$(function(){
/* select box filter */
$('.chosen-select').chosen();
$('.areasProvince').chosen().change(function(){
child = $('.areasCity[data-area="'+$(this).data('area')+'"]');
html = Array('<option value="">--Select--</option>');
parent_id = $(this).val();
if(parent_id == ''){
child.html(html)
}
else
{
$.ajax({
"cache" : true,
"dataType" : "json",
"success" : function(datas){
$.each(datas, function(key, item){
html.push('<option value="'+item.value+'">'+item.text+'</option>');
});
child.html(html);
child.trigger('chosen:updated');
},
"url" : "thailandJSON.php?subdivisions=amphur&parent_id="+parent_id
});
}
});
})
</script>
</body>
</html>
About the author