Fri 30 Dec 2005 12:05:45
รบกวนขอสอบถามเรื่องปุ่มdropdownครับ พอมีวิธีใหมครับ ถ้าผมมีปุ่มdropdownแล้วในปุ่มสามารถเลือกให้ปุ่มdropdown(ตัวมันเอง)
กลายเป็นtextbox หรือทำให้เมนูในdropdownเปลี่ยนเมนูไป เช่น
พอโหลดหหน้า test.html ในหน้านั้นจะมีเมนู dropdown1 ส่วนในเมนูdropdown1จะประกอบด้วย เมนูเพื่อเปลี่ยนตัวมันเอง
-กลายเป็นdropdown2 ในเมนูdropdown2 จะมีเมนูย่อย test1และtest2
-กลายเป็นtextbox เพื่อคีข้อมูล
ขอบคุณมากครับ
รุต
โดยเมื่อเรากด edit ก็จะสามารถแก้ไขข้อมูลใน record ต่างๆได้
ที่นี้ถ้าเราจะทำโดย javascript ได้ครับโดย
ทำการสร้าง select item (dropdown) ขึ้นมาโดยมีการ handle event onchange โดยเรียกไปยังฟังก์ชั่นที่ต้องการครับ
และสร้าง textbox ไว้ให้ครบพอดีกับเหตุการณ์ที่จะเกิดขึ้นจากการเลือกใน select item ครับ เช่นตัวย่าง ก็สร้างไว้ 2 อัน โดยใส่ attribute ของ input ใช้ display:none เพื่อให้แสดงผลในตอนแรกครับ ส่วนในฟังก์ชั่นก็ทำการรับข้อมูลเข้ามาว่าเขาเลือกที่ condition ใด เมื่อเลือกก็ทำการ set ให้ textbox ที่อ้างถึงนั้นมีค่า display:block และให้ select item มีค่าเป็น display:none ครับ
หลักการก็มีประมาณนี้ล่ะครับ
Wed 4 Jan 2006 10:02:06
ถ้าเป็นภาษาphpได้ไหมครับ
ลืมตอบไปว่าทำได้ไหมทำได้ครับ แต่ว่าทุกครั้งต้องส่งไปยัง server ให้แปลกลับมาครับ ซึ่งที่ผมกล่าวถึง asp.net นั้นตัว asp.net ก็แปลงให้อยู่ในรูปแบบ javascript เช่นเดียวกันครับ
Wed 4 Jan 2006 12:59:53
รบกวนขอตัวอย่างjavascriptที่ทำปุ่มdropdown คือผมได้เขียนสูตรคำนวณค่ารถ ตัวอย่างอยู่ที่linkด้านล่างนี้นะครับ ในตัวอย่างผมจะเอา2ตารางแรกมารวมกันนะครับ แต่ทำไม่ได้เนื่องจากไม่รู้สคลิปที่จะทำให้จาวาสคลิปเปลี่ยนจากdropdownมาเป็นtextบ๊อกเพื่อคีข้อมูลนะครับสาเหตุที่ต้องทำแบบนั้นก็เพราะมันจะคิด2แบบแต่คงสูตรเดิมคือคิดเป้น%ที่มีตัวเลขมาให้ กับเขียนเป็นจำนวนเต็มได้ รบกวนขอตัวอย่าง ครับ
http://www.phithan-toyota.com/check/hpcal.html
ขอบคุณมากๆครับ
<script language="javascript">
function getObj(id){
return (document.all)?document.all[id]:document.getElementById(id);
}
function toggle(sender, id){
if(id=='a2'){
getObj(id).style.display = 'block';
getObj(sender).style.display = 'none';
}
}
</script>
<form action="...">
<table>
<tr id="a1" style="display:block"><td><select name="dropdown1" onchange="toggle('a1',this.value)"><option value="0">โปรดเลือก</option><option value="test1">test1</option><option value="test2">test2</option><option value="a2">...edit</option></select></td></tr>
<tr id="a2" style="display:none"><td><input type="text" name="text1"></td></tr>
</table>
</form>
โค๊ดคร่าวๆประมาณนี้ล่ะครับ แต่ยังไม่ได้ทดสอบนะครับ
Wed 4 Jan 2006 15:44:07
ขอบคุณมากครับสำหรับโค้ดที่เขียนให้ผมนำไปศึกษา ขอบคุณมากๆครับ
จะขอรบกวนอีกนิด พอดีมานึกขึ้นได้ถ้าdropdown มันเปลี่ยนเป็นtextBoxไปแล้วมันจะกลับมาเป็นdropdown เหมือนเดิมมะได้ รบกวนขอถามแก้นิดนึงครับ ถ้าให้dropdownข้างซ้ายเป็นตัวเลือก ว่าข้างขวาจะให้dropdown โชหรือtextboxโชได้ไหมครับ โดยให้dropdownข้างซ้ายเป็นตัวกำหนด รบกวนขอโค้ดตัวอย่างนิดนึงนะครับ ผมจะเอาไปเขียนเพิ่มเติมในโปรแกรมคำนวณค่ารถครับ
ขอบคุณมากๆครับ
function getObj(id){
return (document.all)?document.all[id]:document.getElementById(id);
}
function showObj(obj){
var theform = obj.form;
if(id != '0'){
var objs = obj.value.split(",");
eval('theform.'+ objs[0] +'.style.display = "block"');
eval('theform.'+ objs[1] +'.style.display = "none");
}
}
</script>
<form>
<select onchange="showObj(this)"><option value="0"> please select </option><option value="a1,a2"> select </option><option value="a2,a1"> textbox </option></select><select name="a1" style="display:none"></select><input type="text" name="a2" style="display:none">
</form>
โค๊ดประมาณนี้ล่ะครับ แต่ยังไม่ได้ debug นะครับ
Thu 5 Jan 2006 11:10:24
รบกวนอีกนิด ผมลองเอาโค้ดด้านบนมาลองทำดู และ ลองแก้debug ดู แก้มะได้อะครับ งง
รบกวนแก้ให้ทีครับ หาจุดแก้ให้มันใช้ได้มะเจอนะครับ
ขอบคุณมากครับ
<script language="javascript">
function showObj(obj){
var theform = obj.form;
if(obj.value != '0'){
var objs = obj.value.split(",");
eval('theform.'+ objs[0] +'.style.display = "block"');
eval('theform.'+ objs[1] +'.style.display = "none"');
}else{
for(i = 1; i < theform.elements.length; i++){
eval('theform.elements['+ i +'].style.display = "none"');
}
}
}
</script>
<form>
<select onchange="showObj(this)"><option value="0"> please select </option><option value="a1,a2"> select </option><option value="a2,a1"> textbox </option></select><select name="a1" style="display:none"></select><input type="text" name="a2" style="display:none">
</form>
Thu 5 Jan 2006 11:59:14
ขอบคุณมากครับ

















