Thaimisc.com : ทำ Drop Down Menu แบบกล่องคำถาม
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำ Drop Down Menu แบบกล่องคำถาม
เขียนโดย Poj , 16-07-2007
ทำ Drop Down Menu แบบพอคลิกเลือกด้านล่างจะปรากฏ บล๊อกข้อความขึ้นมา ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Ricom Productions | http://ricom.co.uk */
function selectForm(frm){
// Select the div containing all the hidden forms
var hiddenForms = document.getElementById("allForms");

// Select every form within the above div and assign it to an array
theForm = hiddenForms.getElementsByTagName("form");

// Set the display for each of the above forms to NONE
for(x=0; x<theForm.length; x++){
theForm[x].style.display = "none";
}

// If the form selected from the list exists, set it's display to BLOCK
if (theForm[frm-1]){
theForm[frm-1].style.display = "block";
}
}

</script>

<!-- ด้านล่างคือรูปแบบของข้อความคำที่จะอธิบายคำถาม ให้แก้ให้สอดคล้องกับจำนวนคำถามด้วย -->
<style>
#form1 {
color: #000;
background:#EFE3C2;
width:200px;
padding: 10px;
display:none;
}

#form2 {
color: #000;
background:#D9EFC2;
width:200px;
padding: 10px;
display:none;
}

#form3 {
color: #000;
background:#C2E7EF;
width:200px;
padding: 10px;
display:none;
}
</style>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<!-- เริ่มต้น Code แสดง DROP DOWN MENU แสดงรายการคำถาม -->
<form name="selector">
<select id="someID" name="someID" onChange="selectForm(this.options[this.selectedIndex].value)">
<option> โปรดเลือกคำถาม ? </option>
<option value="1"> คำถามที่ 1 </option>
<option value="2"> คำถามที่ 2</option>
<option value="3"> คำถามที่ 3</option>
</select>
</form>
<!-- จบ Code แสดง DROP DOWN MENU แสดงรายการคำถาม -->
<!-- เริ่มต้น Code แสดง เฉลย โดยตรงส่วนนี้ต้องทำให้สอดคล้องกับจำนวนคำถามด้วย -->
<div id="allForms">
<form id="form1">
นี่คือข้อความรายละเอียดของคำถามที่ 1
</form>
<form id="form2">
นี่คือข้อความรายละเอียดของคำถามที่ 2
</form>
<form id="form3">
นี่คือข้อความรายละเอียดของคำถามที่ 3
</form>
</div>
<!-- จบ Code แสดง เฉลย -->


Credit : codetukyang
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com