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

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

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

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

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

Post by birdkritsna »

อย่างแรกเรามาทำความรู้จักกับ 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 546 times
ขึ้นตอนเพียงเท่านี้ครับ ลองเอาไปปรับใช้กันดูนะครับ
User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26733
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan »

ิผิดหมวดนะคะ ต้องเเชร์ที่
viewforum.php?f=78
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests