พบกับบทความเกี่ยวกับคอมพิวเตอร์และ programming ได้ที่ http://articles.modoeye.com
Javascript development / อยากสอบถามว่าเรื่องปุ่มdropdown
root
root
Fri 30 Dec 2005 12:05:45

รบกวนขอสอบถามเรื่องปุ่มdropdownครับ พอมีวิธีใหมครับ  ถ้าผมมีปุ่มdropdownแล้วในปุ่มสามารถเลือกให้ปุ่มdropdown(ตัวมันเอง)
กลายเป็นtextbox หรือทำให้เมนูในdropdownเปลี่ยนเมนูไป  เช่น
 พอโหลดหหน้า test.html ในหน้านั้นจะมีเมนู dropdown1 ส่วนในเมนูdropdown1จะประกอบด้วย เมนูเพื่อเปลี่ยนตัวมันเอง
-กลายเป็นdropdown2 ในเมนูdropdown2 จะมีเมนูย่อย  test1และtest2
-กลายเป็นtextbox เพื่อคีข้อมูล

     ขอบคุณมากครับ
    รุต

Administrator
Fri 30 Dec 2005 12:46:17
เป็นไปได้อยู่ครับโดยใน asp.net ก็มีฟังก์ชั่นคล้ายๆแบบนี้อยู่เหมือนกันครับ เช่นที่ใช้ใน gridview
โดยเมื่อเรากด 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ได้ไหมครับ

Administrator
Wed 4 Jan 2006 11:13:03
PHP เป็น Server-Side Script ครับ ดังนั้นทุครั้งที่ user จะทำการเปลี่ยนแปลงใดๆจะต้องมีการส่งค่าไปยัง server ด้วยทุกครั้งครับซึ่งจะไม่เหมือน javascript ซึ่งเป็น Client-Side Script จะสามารถตอบสนองต่อ user ได้อย่างทันทีครับ

ลืมตอบไปว่าทำได้ไหมทำได้ครับ แต่ว่าทุกครั้งต้องส่งไปยัง 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

ขอบคุณมากๆครับ

Administrator
Wed 4 Jan 2006 13:48:04
ขอเขียนให้ดูคร่าวๆนะครับ

<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ข้างซ้ายเป็นตัวกำหนด   รบกวนขอโค้ดตัวอย่างนิดนึงนะครับ  ผมจะเอาไปเขียนเพิ่มเติมในโปรแกรมคำนวณค่ารถครับ

ขอบคุณมากๆครับ

Administrator
Wed 4 Jan 2006 23:13:25
<script language="javascript">
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 ดู  แก้มะได้อะครับ  งง

รบกวนแก้ให้ทีครับ   หาจุดแก้ให้มันใช้ได้มะเจอนะครับ

ขอบคุณมากครับ

Administrator
Thu 5 Jan 2006 11:37:55
ทำการ 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

ขอบคุณมากครับ

Reply
Name:
E-mail:
Home | Services | Forum | Classified | Directories | Support | Contact
ATOM feed RSS 0.9 feed RSS 1.0 feed RSS 2.0 feed
Copyright © 2005 - 2007 Modoeye.com, All Rights Reserved.
Disclaimer | Privacy policy | Term of Use | Term of Services
Valid XHTML Valid CSS! PHP: Hypertext Preprocessor MySQL database Apache Powered! FreeBSD Power to serve
Modoeye Sitemap Client login