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

วิธีการนำข้อมูลใน 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 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"

สนใจสั่งซื้อราคาสุดคุ้ม 1,500 บาท
http://fastcoding.phpcodemania.com