วันพฤหัสบดีที่ 4 กันยายน พ.ศ. 2557

ที่อยู่แบบ Dropdown ด้วย jQuery

   
           การสร้าง Dropdownlist ที่อยู่ ภาค/จังหวัด/อำเภอ/ตำบล ด้วย jQuery จะดีตรงที่สามารถใช้ทั้งใน form เพิ่มใหม่ และ form การแก้ไข โดยที่ไม่ต้องเปลี่ยนแปลง code มากนัก ดังตัวอย่าง ( download ตัวอย่าง

1. form เพิ่มใหม่

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
        //<![CDATA[
         var geo_id = <?php echo isset($_POST['geo_id'])
          ?intval($_POST['geo_id']):'0'; ?>;
        var province_id = <?php echo isset($_POST['province_id'])
         ?intval($_POST['province_id']):'0'; ?>; //default 76=นราธิวาส province_id
        var amphur_id = <?php echo isset($_POST['amphur_id'])
         ?intval($_POST['amphur_id']):'0'; ?>;  //default 987=บาเจาะ amphur_id
        var district_id = <?php echo isset($_POST['district_id'])
         ?intval($_POST['district_id']):'0'; ?>;

        function loadSelectBox(id,url,selected){
                $.get(
                    url,{},function(data){
                                   $(id).html(data);
                                   if (selected!=0){
                                        $(id+' option[value='+selected+']').attr('selected','selected');
                                   }
                               }
                 );
        }

        $(function(){
                loadSelectBox(
                           '#geo_id',
                            'geo_combo.php?load=geo',
                            geo_id
                         );
               loadSelectBox(
                           '#province_id',
                           'geo_combo.php?load=province&geo_id='+geo_id,
                           province_id
               );
               loadSelectBox(
                         '#amphur_id',
                         'geo_combo.php?load=amphur&province_id='+province_id,
                         amphur_id
               );
               loadSelectBox(
                         '#district_id',
                         'geo_combo.php?load=district&amphur_id='+amphur_id,
                         district_id
               );
               $('#geo_id').change(function(e){
                          var selected = e.target.value;
                          loadSelectBox(
                              '#province_id',
                              'geo_combo.php?load=province&geo_id='+selected,
                              0 );
                          $('#amphur_id :not(option:first)').remove(); //add
                           $('#district_id :not(option:first)').remove(); //add
                 });
               $('#province_id').change(function(e){
                        var selected = e.target.value;
                        loadSelectBox(
                             '#amphur_id',
                             'geo_combo.php?load=amphur&province_id='+selected,
                             0 );
                        $('#district_id :not(option:first)').remove(); //add
               });
               $('#amphur_id').change(function(e){
                          var selected = e.target.value;
                           loadSelectBox(
                           '#district_id',
                           'geo_combo.php?load=district&amphur_id='+selected,
                           0 );
               });
        });
        //]]>
</script>

</head>
<body>

    <div align="center">
      <b><font size="5">บันทึกข้อมูลรายใหม่</font></b>
    </div>
            <form name="form1" action="#" method="POST" >
              <table class="table table-bordered">
              <tr class="active"><td align=left>
                   <?= str_repeat('&nbsp;', 3);?>
                    ชื่อ <input type="text" size="30" name="fname" class="form-control" />
                    <?= str_repeat('&nbsp;', 3);?>
                    นามสกุล &nbsp; <input type="text" size="30" name="lname" class="form-control" />
                    <?= str_repeat('&nbsp;', 3);?>
                    <br><br>
                    <?= str_repeat('&nbsp;', 3);?>
                    บ้านเลขที่ <input type="text" size="10" name="ban_no" class="form-control"/>
                     <?= str_repeat('&nbsp;', 3);?>
                    บ้าน/ชุมชน <input type="text" size="20" name="ban_name" class="form-control"/>
                     <?= str_repeat('&nbsp;', 3);?>
                    หมู่ <input type="text" size="2" name="moo" class="form-control"/>
                    <br><br>
                      <?= str_repeat('&nbsp;', 3);?>
                     ภาค
                    <select id="geo_id" name="geo_id" class="form-control">
                        <option value="0">- เลือกภาค -</option>
                    </select>
                     <?= str_repeat('&nbsp;', 3);?>
                     จังหวัด <select id="province_id" name="province_id" class="form-control">
                                <option value="0">-- เลือกจังหวัด --</option>
                            </select>
                      <?= str_repeat('&nbsp;', 3);?>
                    อำเภอ <select id="amphur_id" name="amphur_id" class="form-control">
                                <option value="0">-- เลือกอำเภอ --</option>
                            </select>
                     <?= str_repeat('&nbsp;', 3);?>
                    ตำบล <select id="district_id" name="district_id" class="form-control">
                                <option value="0">-- เลือกตำบล --</option>
                            </select>
            <tr class="active"><td align=center>
                        <br>
                     <input TYPE="submit" value=" บันทึก " class="btn btn-success btn-lg" />
           </td></tr>
           </table>
      </form>
</body>
</html>


2. form แก้ไข
       การแก้ไขข้อมูลให้ใช้ไฟล์เดิม(form เพิ่มใหม่) โดยที่เปลียนแปลงcodeเฉพาะส่วน(แทนที่codeเดิม) ดังนี้

 <? include('db_inc.php');
        //ดึงค่าเดิมจาก table มาเป็นค่า deafult แทนค่า 0
        //เช่น เก็บเป็นตัวแปร $default_geo_id ,  $default_province_id, $default_amphur_id ,$default_district_id
        $default_geo_id='6';
        $default_province_id='76';
        $default_amphur_id='987';
        $default_district_id='8795';
         ?>

         var geo_id = <?php echo isset($_POST['geo_id'])
          ?intval($_POST['geo_id']):$default_geo_id; ?>;        //default 6=ภาคใต้ geo_id
        var province_id = <?php echo isset($_POST['province_id'])
         ?intval($_POST['province_id']):$default_province_id; ?>; //default 76=นราธิวาส province_id
        var amphur_id = <?php echo isset($_POST['amphur_id'])
         ?intval($_POST['amphur_id']):$default_amphur_id; ?>;  //default 987=บาเจาะ amphur_id
        var district_id = <?php echo isset($_POST['district_id'])
         ?intval($_POST['district_id']):$default_district_id; ?>;    //default 8795=บาเระเหนือ district_id



3. ไฟล์หลักสำหรับสร้างข้อมูลใน Dropdown ชื่อ geo_combo.php ดังนี้

<?php
 header('Content-type:text/html;charset=UTF-8');
 //require_once 'config.inc.php';
 require_once 'db_inc.php';

 if (!isset($_GET['load'])){
  $_GET['load'] = 'province';
 }

 switch($_GET['load']){
           case 'geo':
                         $r = mysql_query("SELECT * FROM `sys_geography`") or report();
                         echo '<option value="0">-- เลือกภาค --</option>';
                         while ($row = mysql_fetch_assoc($r)){
                              echo '<option value="',$row['GEO_ID'],'">', $row['GEO_NAME'], '</option>';
                         }
          break;
          case 'province':
                       $province_id = isset($_GET['geo_id'])?intval($_GET['geo_id']):0;
                       $r = mysql_query("SELECT * FROM `sys_province` WHERE `GEO_ID`=$geo_id") or report();
                       echo '<option value="0">-- เลือกจังหวัด --</option>';
                       while ($row = mysql_fetch_assoc($r)){
                             echo '<option value="',$row['PROVINCE_ID'],'">', $row['PROVINCE_NAME'], '</option>';
                       }
          break;
          case 'amphur':
                      $province_id = isset($_GET['province_id'])?intval($_GET['province_id']):0;
                       $r = mysql_query("SELECT * FROM `sys_amphur` WHERE `PROVINCE_ID`=$province_id") or report();
                       echo '<option value="0">-- เลือกอำเภอ --</option>';
                      while ($row = mysql_fetch_assoc($r)){
                                echo '<option value="',$row['AMPHUR_ID'],'">', $row['AMPHUR_NAME'], '</option>';
                      }
          break;
          case 'district':
                       $amphur_id = isset($_GET['amphur_id'])?intval($_GET['amphur_id']):0;
                      $r = mysql_query("SELECT * FROM `sys_district` WHERE `AMPHUR_ID`=$amphur_id") or report();
                       echo '<option value="0">-- เลือกตำบล --</option>';
                       while ($row = mysql_fetch_assoc($r)){
                            echo '<option value="',$row['DISTRICT_ID'],'">', $row['DISTRICT_NAME'],'</option>';
                       }
          break;
 }

 function report(){
     return die('<option>'.htmlspecialchars(mysql_error()).'</option>');
 }
?>


4. ไฟล์ db_inc.php ดังนี้
  mysql_connect("localhost","root","test"); 
  mysql_select_db("intervac_db");
  mysql_query("SET NAMES utf8");


--creadit : http://web-programming-bookmark.blogspot.com/2010/11/dropdown-listbox-jquery.html

--ดาวน์โหลดไฟล์ database ได้ที่ http://www.thaicreate.com/free-web-script/thailand-province-database.html


ไม่มีความคิดเห็น: