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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by thatsawan » 23/09/2019 6:29 pm

ิผิดหมวดนะคะ ต้องเเชร์ที่
viewforum.php?f=78

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

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 572 times
ขึ้นตอนเพียงเท่านี้ครับ ลองเอาไปปรับใช้กันดูนะครับ

Top