การสลับค่าตัวแปร ระหว่าง 2 list box โดยใช้ javascript มาช่วย

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

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

User avatar
birdkritsna
PHP Super Member
PHP Super Member
Posts: 225
Joined: 16/09/2019 9:57 am

การสลับค่าตัวแปร ระหว่าง 2 list box โดยใช้ javascript มาช่วย

Post by birdkritsna » 23/09/2019 4:28 pm

อย่างแรกเรามาทำความรู้จักกับ JavaScript กันก่อน
ซึ่งก็คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java ,JavaScript เป็น ภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า "สคริปต์" (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่งมีวิธีการทำงานในลักษณะ "แปลความและดำเนินงานไปทีละคำสั่ง" หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่ง เซิร์ฟเวอร์ (Server)

มาเริ่มกันเลยครับว่า ขั้นตอนง่าย ๆ

1. สร้าง list box มาก่อน โดยตั้งชื่อ id แต่ละ list box ด้วย

Code: Select all

			<select name="list1" id="list1">
                                                <option value="one"><?php echo 1; ?></option>
                                                <option value="two"><?php echo 2; ?></option>
                                      </select> 
                                 <select name="list2" id="list2">
                                                <option value="one"><?php echo 1; ?></option>
                                                <option value="two"><?php echo 2; ?></option>
                                      </select>
2.สร้างปุ่ม ที่จะทำการสลับค่ากัน

Code: Select all

<button class="btn" id="swap" name='swap' onclick="swapCurrency();">สลับ</button>
3. ใส่คำสั่ง script เพื่อกำหนดปุ่มให้ทำงานตามที่ต้องการ

Code: Select all

<script>
    function swapCurrency(){
        var list1 = document.getElementById('list1').value;
        var list2 = document.getElementById('list2').value;
        document.getElementById('list2').value = list1;
        document.getElementById('list1').value = list2;
    }
</script>
ผลลัพธ์
111.jpg
111.jpg (2.4 KiB) Viewed 266 times
ขึ้นตอนเพียงเท่านี้ครับ ลองเอาไปปรับใช้กันดูนะครับ


Post Reply

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 21 guests