version 4.1.0

สร้าง Dropdown List ด้วยเทคนิค AJAX (Model)

  พุธที่ 11 กุมภาพันธ์ พ.ศ. 2558 เวลา 01:12:07 น.      3,306 ครั้ง


สร้าง Dropdown List ด้วยเทคนิค AJAX (Model)

สร้างตาราง "tbl_province" เก็บข้อมูลจังหวัด

 CREATE TABLE `tbl_province` (
  `province_id` int(2) NOT NULL AUTO_INCREMENT,
  `province_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`province_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- เพิ่มข้อมูล
-- ----------------------------
INSERT INTO `tbl_province` VALUES ('1', 'ลำปาง');
INSERT INTO `tbl_province` VALUES ('2', 'ลำพูน');
INSERT INTO `tbl_province` VALUES ('3', 'เชียงราย');
INSERT INTO `tbl_province` VALUES ('4', 'เชียงใหม่');

1. สร้างตาราง ชื่อว่า "tbl_province" ด้วยคำสั่ง SQL ด้านบน เพื่อเก็บข้อมูล "จังหวัด"

สร้างไฟล์ Model ชื่อว่า "Province.php"

 class Province extends Eloquent  
{
    
    public $timestamps = false;

    // ชื่อตาราง tbl_province ในฐานข้อมูล
    protected $table = 'tbl_province';
    
}

2. สร้างไฟล์ Model ชื่อว่า "Province.php" ไว้ในไดเรคทอรี่ [skeleton]\app\models

สร้างตาราง "tbl_city" เก็บข้อมูลอำเภอ

 CREATE TABLE `tbl_city` (
  `city_id` int(4) NOT NULL AUTO_INCREMENT,
  `province_id` int(2) NOT NULL,
  `city_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`city_id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- เพิ่มข้อมูล
-- ----------------------------
INSERT INTO `tbl_city` VALUES ('1', '1', 'เมือง');
INSERT INTO `tbl_city` VALUES ('2', '1', 'เสริมงาม');
INSERT INTO `tbl_city` VALUES ('3', '1', 'เถิน');
INSERT INTO `tbl_city` VALUES ('4', '1', 'แม่พริก');
INSERT INTO `tbl_city` VALUES ('5', '2', 'ทุ่งหัวช้าง');
INSERT INTO `tbl_city` VALUES ('6', '2', 'แม่ทา');
INSERT INTO `tbl_city` VALUES ('7', '2', 'เมืองลำพูน');
INSERT INTO `tbl_city` VALUES ('8', '2', 'ลี้');
INSERT INTO `tbl_city` VALUES ('9', '3', 'แม่สาย‎');
INSERT INTO `tbl_city` VALUES ('10', '3', 'เชียงแสน‎');
INSERT INTO `tbl_city` VALUES ('11', '3', 'ขุนตาล');
INSERT INTO `tbl_city` VALUES ('12', '3', 'เมืองเชียงราย‎');
INSERT INTO `tbl_city` VALUES ('13', '4', 'ดอยเต่า');
INSERT INTO `tbl_city` VALUES ('14', '4', 'ดอยสะเก็ด');
INSERT INTO `tbl_city` VALUES ('15', '4', 'ฝาง');
INSERT INTO `tbl_city` VALUES ('16', '4', 'แม่ริม');

3. สร้างตาราง ชื่อว่า "tbl_city" ด้วยคำสั่ง SQL ด้านบน เพื่อเก็บข้อมูล "อำเภอ"

สร้างไฟล์ Model ชื่อว่า "City.php"

 class City extends Eloquent  
{
    
    public $timestamps = false;

    // ชื่อตาราง tbl_city ในฐานข้อมูล
    protected $table = 'tbl_city';
    
}

4. สร้างไฟล์ Model ชื่อว่า "City.php" ไว้ในไดเรคทอรี่ [skeleton]\app\models

สร้างไฟล์ Controller ชื่อว่า "ExampleController.php"

 class ExampleController extends BaseController 
{
    
    public function exampleIndex()
    {
        $dataProvince = Province::all();
        $rowsProvince = array();
        $rowsProvince[''] = 'กรุณาเลือกจังหวัด';
        foreach ($dataProvince as $rowProvince) {
            $rowsProvince[$rowProvince->province_id] = $rowProvince->province_name;
        }
        return View::make('example.index')->with('rowsProvince', $rowsProvince);
    }
    
    public function exampleModel()
    {
        $countCity = City::where('province_id', '=', Input::get('province_id'))->count();
        if(!empty($countCity))
        {
            $dataCity = City::where('province_id', '=', Input::get('province_id'))->get();
            foreach ($dataCity as $rowCity) {
                echo '';
            }
        }else{
            echo '';
        }
    }
}

5. เก็บไฟล์ Controller ชื่อว่า "ExampleController.php" ลงในโฟล์เดอร์ [skeleton]\app\controllers

สร้างไฟล์ View ตัวอย่าง ชื่อว่า "index.blade.php"

 <div class="ajax">
    {{ Form::open([
        "url" => "example/create",
        "method" => "POST",
        "files" => true,
        'class' => 'form-example',
    ]) }}
        <div class="box"><br />
            <h2 style="text-align:center;">Dropdown List : AJAX</h2>
            <table align="center">
                <tr>
                    <td style="text-align:right;">{{ Form::label('province_id', 'จังหวัด') }}</td>
                    <td>{{ Form::select('province_id', $rowsProvince, Input::old('province_id'),
                        array('class' => 'form-control')) }}</td>
                </tr>
                <tr>
                    <td style="text-align:right;">{{ Form::label('city_id','อำเภอ') }}</td>
                    <td>{{ Form::select('city_id', 
                        array('' => '-- กรุณาเลือกจังหวัดก่อน --'), 
                        Input::old('province_id'), 
                        array('class' => 'form-control')) 
                    }}</td>
                </tr>
            </table>
        </div>    
    {{ Form::close() }}
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    jQuery(function($) {
        jQuery('body').on('change','#province_id',function(){
            jQuery.ajax({
                'type':'POST',
                'url':'http://localhost/laravel_demo/public/example/model',
                'cache':false,
                'data': {province_id:$("#province_id").val()},
                'success':function(html){
                    $("#city_id").html(html);
                }
            });
            return false;
        });
    });
</script>

6. เก็บไฟล์ Views ชื่อว่า "index.blade.php" ลงในโฟล์เดอร์ "example" ตรงไดเรคทอรี่ [skeleton]\app\views

เพิ่มคำสั่ง Route

 /* dropdown list : ajax */
Route::get('example', 'ExampleController@exampleIndex');
Route::post('example/model', 'ExampleController@exampleModel');

7. เพิ่มคำสั่ง Route ให้กับ URL ทุกครั้ง

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

8. เข้าไปที่ URL http://localhost/laravel_demo/public/example และแสดงผลดังภาพ

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

9. ทดลอง คลิกเลือก "จังหวัด" เป็น "ลำปาง" ดังรูป

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง

10. แสดงข้อมูล "อำเภอ" ของจังหวัด "ลำปาง" ดังรูป




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment