ได้กลับมาเขียน html 1 หน้าทำให้รู้สึกว่า เมื่อไม่ได้เขียนมันนานๆ ต้องเปิด reference ตลอดเลยเรา ก็พอเขียนไปได้เรื่อยๆ จนถึงขั้นตอนการทำ js ดึงค่าจากไฟล์ มาใส่ใน dropdown ใน html ขั้นตอนนี้เสียเวลานานมาก เพราะ search มาเจอ solution ต่างกันทำให้สับสนมากจนอยากเขียนเก็บไว้เอง
output ที่ต้องการนั้นคือ เมื่อ load html แล้วต้องการให้รายชื่อทั้งหมด add ลงไปใน dropdown ใน html ที่ load ขึ้นมา ขั้นแรกก็ต้องใส่ function onload ที่ body ซะก่อนคือ
<body onload="additem();">
ต่อมาก็ต้องสร้าง dropdown โดยเราต้องกำหนด id ให้มันด้วยเนื่องจากจะได้ระบุได้ว่าจะเอา output จากไฟล์ไปใส่ที่ใด
<select id="myitem"></select>
ขั้นต่อไปก็ต้องไปสร้าง javascript function ที่ชื่อว่า additem() ดังนี้ครับ
function additem(){
var ajax;
try{
// Opera 8.0+, Firefox, Safari
ajax = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajax.onreadystatechange = function(){
if (ajax.readyState == 4) {
document.getElementById('myitem').innerHTML = ajax.responseText;
}
}
ajax.open("GET", "item.html", true);
ajax.send(null);
}
ซึ่งไฟล์ของเราที่ชื่อ item.html นั้นมีข้อมูลดังนี้
<option>item1</option>
<option>item2</option>
<option>item3</option>
สรุปคือเมื่อ load page นี้ขึ้นมาแล้วจะทำการ add option ต่างๆ จากไฟล์ item.html ไปใส่ที่ select id="myitem" ครับซึ่งก็จะได้ dropdown ที่มีค่า item1, item2, item3 ตามลำดับคร้าบ
