วิธีการนำข้อมูลใน Dropdown List ที่มีเครื่องหมายคั่นกลาง ไปแสดงใน div แบบแยกทีละรายการ (Option List)

โดย CyberMAN •
วิธีการนำข้อมูลใน Dropdown List ไปแสดงใน div ที่มีไอดี oupput ด้วย JavaScript มีดังนี้

1. ใช้ ฟังก์ชั่น split() เพื่อแยกข้อมูลเป็นอาร์เรย์
2. และใช้ map() เพื่อวนลูปสร้างข้อความใหม่
3. สุดท้ายเปลี่ยนอาร์เรย์เป็นข้อความตามเดิมด้วย join() พร้อมกับขึ้นบรรทัดใหม่ <br/>



<form action="dropdown.php" method="POST">
  <select name='QR' id="QR" onChange="outputValue(this)">
    <option value='324|56|70'>324|56|70</option>
    <option value='4|3567|00'>4|3567|00</option>
    <option value='434|5640|'>434|5640|</option>
    <option value='6|76|57|50'>6|76|57|50</option>
  </select>
</form>
<div id='output'></div>


<script>
function outputValue(item){
 var opt_val = item.value;
 //แยกข้อความเป็นอาร์เรย์
 var arr_number = opt_val.split('|');
 //วนลูปแทรกข้อความ
 var newarray = arr_number.map((num, i) => {
   return 'ตัวเลขชุดที่ '+ (i+1) + ' : ' + num;
 })
 //ขึ้นบรรทัดใหม่
 var new_text = newarray.join('<br/>');
    document.getElementById('output').innerHTML = new_text;
}
</script>


ข้อมูลเพิ่มเติม
https://www.w3schools.com/jsref/jsref_split.asp
https://www.w3schools.com/jsref/jsref_map.asp
https://www.w3schools.com/jsref/jsref_join.asp








PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
http://fastcoding.phpcodemania.com/index.php/#purchase-order
สนใจสั่งซื้อราคาสุดคุ้ม 1,500 บาท
http://fastcoding.phpcodemania.com