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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

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

ภาพประจำตัวสมาชิก
birdkritsna
PHP Super Member
PHP Super Member
โพสต์: 234
ลงทะเบียนเมื่อ: 16/09/2019 9:57 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย birdkritsna »

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

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

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

โค้ด: เลือกทั้งหมด

			<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.สร้างปุ่ม ที่จะทำการสลับค่ากัน

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

<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 1509 times
ขึ้นตอนเพียงเท่านี้ครับ ลองเอาไปปรับใช้กันดูนะครับ
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

ิผิดหมวดนะคะ ต้องเเชร์ที่
viewforum.php?f=78
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30