วิธีการการสร้าง listbox สำหรับเลือกรายการแล้วทำการช่องกรอกตามรายการที่กำหนด

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 4457
Joined: 19/09/2018 10:33 am

วิธีการการสร้าง listbox สำหรับเลือกรายการแล้วทำการช่องกรอกตามรายการที่กำหนด

Post by Ittichai_chupol » 13/03/2020 3:00 pm

การอำนวยความสะดวกต่อผู้ใช้งาน ถือเป็นสิ่งที่สำคัญสำหรับเจ้าของเว็บไซต์ หรือระบบนั้นๆ เพื่อที่จะเป็นสิ่งที่ดึงดูดความสนใจให้กับที่เข้ามาใช้งานบริการเว็บไซต์นั้นๆได้อย่างดี โดยเฉพาะผู้ที่พึงเข้ามาใช้งานเป็นครั่งเเรกนั้นจะถือว่าเป็นความประทับใจแรกที่จะสามารถทำให้ผู้ช้งานคนนั้นกลับมาใช้งานบริการเว็ไซต์นี้ต่อๆในครั้งถัดไป ยิ่งเฉพาะกรณีที่มีการกรอกข้อมูลจำนวนมากๆเเล้ว นั้นถ้าหากผุ้ใช้งานต่อมากรอกข้อมูลในทุกช่อง โดยไม่มีความสามารถของเว็บไซต์ใดมาช่วยจะทำให้ผู้ใช้งานั้น รู้สึกเบื่อได้จนไม่อยากที่จะเข้าใช้งานอีกได้ และตัวย่างจากนี้นั้นก็เป็นวิธีการที่จะอำนวยความสะดวกต่อผู้ที่เข้มาใช้งานเว็บไซต์ได้ โดยเป็นการที่พัฒนาร่วมกันระหว่าง php html jQuery และ Ajex ที่จะแสดงชช่องกรอกข้อมูลให้ตรงการ รายการที่เลือกมาจาก listbox จากตัวอย่างต่อจากนี้


1. สร้าง listbox สำหรับเป็นรายการเพื่อเลือก

Code: Select all


<select id="package" name="package_id" class="select">  //  id เป็นตัวกำกับ เพื่อส่งค่าให้กับ  JQuery
<option value="2">1 ปี  price  500.00</option>
<option value="3">3 ปี  price  1200.00</option>
<option value="4">นักศึกษา  price  1500.00</option>
<option value="5">5 ปี  price  2000.00</option>
</select>


2.ช่องกรอกข้อมูล โดยจะแสดงขึ้นเมือมีการเลือกรายการที่กำหนด

Code: Select all

 
 <dl id="cars"> //  id เป็นตัวกำกับ เพื่อส่งค่าให้กับ  JQuery
                    <dt ><label for="">รูปบัตรนิสิต</label></dt>
                    <dd>
                        <input type="file" name="image_studen" accept="image/*" ><br>
                    </dd>
                </dl>
3. JQuery สำหรับการรับค่าจากรายการ และ กำหนดการแสดงช่องกรอกข้อมูล

Code: Select all

$('#cars').hide();  //ซ่อนการแสดงผล ของ ช่องกรอกข้อมูล โดยใช่ id เป็นตัวกำกับ
$("#package").change(function () {  //ตรวจสอบว่า listbox มีการเปลี่ยนแปลงรายการหรือไหม  โดยใช่ id เป็นตัวกำกับ 
    var txt = $("#package").val();  // สร้างตีัวแปร เพื่อรับค่า  value จาก  listbox 
    if (txt == 4) {  //ตรวจสอบค่าที่ได้มานั้น มีค่าตรงกำกับที่กำหนดหรอไม
        $('#cars').show();  //ถ้าหากใช้  แสดงผล ของ ช่องกรอกข้อมูล โดยใช่ id เป็นตัวกำกับ
    } else {  //ถ้าหากไม่ใช้
        $('#cars').hide();   //ซ่อนการแสดงผล ของ ช่องกรอกข้อมูล โดยใช่ id เป็นตัวกำกับ
    }
});

ผลลัพธ์


1.ก่อนการเลือกรายการ
Selection_018.png
Selection_018.png (22.73 KiB) Viewed 4405 times
2.หลังเลือกรายการ
Selection_019.png
Selection_019.png (28.52 KiB) Viewed 4405 times

บทความที่เกี่ยวข้อง
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox
ทำเอฟเฟค ตอนกดปุ่ม
คำสั่งจัดการฐานข้อมูล MySQL
私を傷つけるすべてが終了します。

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 23 guests