version 4.1.0

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

  พุธที่ 11 กุมภาพันธ์ พ.ศ. 2558 เวลา 00:30:39 น.      3,044 ครั้ง


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

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

 class ExampleController extends BaseController 
{
    
    public function exampleIndex()
    {
        return View::make('example.index');
    }
    
    public function exampleDynamic()
    {
        
        if(Input::get('province_id') == 0){
            // จังหวัด "ลำปาง"
            $arr = array('เมือง', 'เสริมงาม', 'เถิน', 'แม่พริก');
            foreach ($arr as $value) {
                echo '';
            }
        }elseif(Input::get('province_id') == 1){
            // จังหวัด "ลําพูน"
            $arr = array('ทุ่งหัวช้าง', 'แม่ทา', 'เมืองลำพูน', 'ลี้');
            foreach ($arr as $value) {
                echo '';
            }
        }elseif(Input::get('province_id') == 2){
            // จังหวัด "เชียงราย"
            $arr = array('แม่สาย‎', 'เชียงแสน‎', 'ขุนตาล', 'เมืองเชียงราย‎');
            foreach ($arr as $value) {
                echo '';
            }
        }elseif(Input::get('province_id') == 3){
            // จังหวัด "เชียงใหม่"
            $arr = array('ดอยเต่า', 'ดอยสะเก็ด', 'ฝาง', 'แม่ริม');
            foreach ($arr as $value) {
                echo '';
            }
        }else{
            echo '';
        }
    }
}

1. เก็บไฟล์ 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', array(
                            '' => 'กรุณาเลือกจังหวัด', 
                            0 => 'ลำปาง', 
                            1 => 'ลำพูน', 
                            2 => 'เชียงราย', 
                            3 => 'เชียงใหม่'
                         ), 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/dynamic',
                'cache':false,
                'data': {province_id:$("#province_id").val()},
                'success':function(html){
                    $("#city_id").html(html);
                }
            });
            return false;
        });
    });
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

author

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

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






Comment