Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > สอบถาม js การสร้างปุ่มเพิ่ม listbox(ทั้งก้อน)หลังจากเลือกlistbox แล้วให้แสดงข้อความ



 

สอบถาม js การสร้างปุ่มเพิ่ม listbox(ทั้งก้อน)หลังจากเลือกlistbox แล้วให้แสดงข้อความ

 



Topic : 050598



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์




สอบถาม js การสร้างปุ่มเพิ่ม listbox(ทั้งก้อน)หลังจากเลือกlistbox แล้วให้แสดงข้อความ
(ข้อความในทีนี้หมายถึงตารางค่าใช้จ่ายแต่ละประเภท แต่ขอเป็นข้อความครับ เพื่อจะได้ง่ายต่อท่านผู้รู้ให้แนวคิดผม)

อธิบายขั้นตอนการทำงานดังภาพ
js 2

โค้ดที่ผมทำนะครับ มีแค่การเพิ่ม listbox อย่างเดียวเท่านั้น ดัดแปลงจากการเพิ่ม textbox
ต้องการทำให้หลังจากเลือก listbox แล้ว javascript สร้างตารางหัวข้อที่เกี่ยวข้องขึ้นมา

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>

var num_box=1;
function create_box() //รับค่า 4 ตัว
{
		
    var zone=document.getElementById('zone_box')  // รับค่ามาจาก tag div ชื่อว่า zone_box
    var div=document.createElement('div');  //สร้าง element ชื่อว่า div
    div.setAttribute("id","bo1x_"+num_box); //set id ให้กล่อง
    div.innerHTML="รายการที่ "+num_box+" <select name='type_pay'  onchange='create_box1_("+num_box+");'><option value=''>กรุณาเลือกค่าใช้จ่าย</option><option value='1'>ค่าใช้จ่ายส่วนกลาง</option><option value='2'>ประปา</option><option value='3'>ค่าไฟ</option></select><div id='bo1x_"+num_box+"'></div><br>"
    zone.appendChild(div);  //รับค่าจาก element div ลงพื้นที่ของ zone เครือลูก
//-------------------------------------------------	

    num_box++;
}

//---------------------------------------------------------------------------------------------------------------------------------------------
</script>


</head>

<body>
<input type="button" name="Submit" value="เพิ่มรายการค่าใช้จ่าย"  style="cursor:pointer"  onclick='create_box()'>
<div id='zone_box'></div><br />
<br />
<table width="29%" border="2" cellpadding="5" cellspacing="0" bordercolor="#ffffff" bgcolor="#CCFFFF" class="arial12pixfornumber"   >
  <tr>
    <td><div align="left"> 2. ค่าน้ำ<br />
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="arial12pixfornumber">

              <tr>
                <td width="11%" nowrap="nowrap">จำนวนเงินที่จ่ายจริง&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
                <td width="89%"><input name="rate_1_sum" type="text" id="rate_1_sum"   size="20"/>
                  บาท</td>
              </tr>

              <tr>
                <td colspan="2" nowrap="nowrap" ><hr width="400" px;="px;" /></td>
              </tr>
            </table>
    </div></td>
  </tr>
</table>
</body>

</html>




ผมลองสร้าง function create_box2 ขึ้นมา เพื่อเอา <div id='zone_box2'></div>< ไปแทรกต่อท้าย innerhtml ใน create_box() แต่มันก็เพิ่มแค่ตำแหน่งแรกที่เดียวเท่านั้นดังโค้ดต่อไปนี้

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>

var num_box=1;
function create_box() //รับค่า 4 ตัว
{
		
    var zone=document.getElementById('zone_box')  // รับค่ามาจาก tag div ชื่อว่า zone_box
    var div=document.createElement('div');  //สร้าง element ชื่อว่า div
    div.setAttribute("id","bo1x_"+num_box); //set id ให้กล่อง
    div.innerHTML="รายการที่ "+num_box+" <select name='type_pay'  onchange='create_box2();'><option value=''>กรุณาเลือกค่าใช้จ่าย</option><option value='1'>ค่าใช้จ่ายส่วนกลาง</option><option value='2'>ประปา</option><option value='3'>ค่าไฟ</option></select><div id='zone_box1'></div><br>"
    zone.appendChild(div);  //รับค่าจาก element div ลงพื้นที่ของ zone เครือลูก
//-------------------------------------------------	

    num_box++;
}

function create_box2() //รับค่า 4 ตัว
{
		
    var zone1=document.getElementById('zone_box1')  // รับค่ามาจาก tag div ชื่อว่า zone_box
    var div1=document.createElement('div1');  //สร้าง element ชื่อว่า div
    div1.setAttribute("id","bo2x_"+num_box); //set id ให้กล่อง
    div1.innerHTML="ตารางที่เกี่ยวข้อง<br>"
    zone1.appendChild(div1);  //รับค่าจาก element div ลงพื้นที่ของ zone เครือลูก
//-------------------------------------------------	
}




//---------------------------------------------------------------------------------------------------------------------------------------------
</script>


</head>

<body>
<input type="button" name="Submit" value="เพิ่มรายการค่าใช้จ่าย"  style="cursor:pointer"  onclick='create_box()'>
<div id='zone_box'></div><br />
<br />
</body>

</html>


** หมายเหตุ คำว่า "ตารางที่เกี่ยวข้อง" หมายถึงคำพูดแทนตารางค่าใช้จ่ายแต่ละประเภทหลังจากเลือก listbox เท่านั้น(ไม่เน้นเรื่องค่าของ listbox เลือกอะไรต้องแสดงตารางที่เกี่ยวข้องนั้น) อยากทราบแนวคิด เพื่อให้สามารถแทรกสิ่งที่ต้องการหลังจากเลือก listbox

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



Tag : PHP, JavaScript








ประวัติการแก้ไข
2010-10-22 10:33:12
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2010-10-22 10:03:42 By : theleng View : 1581 Reply : 2
 

 

No. 1



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์


มื่อใหม่จิงๆครับ ขอความกรุณาด้วย




ประวัติการแก้ไข
2010-10-22 10:34:44
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-10-22 10:28:59 By : theleng
 


 

No. 2



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์


ตอนนี้ผมพอได้วิธีแล้วครับ สร้างส่วนที่ต้องการแสดงทั้งหมดเป็นตารางใส่ใน innerhtml ของ function create_box แล้วทำการซ่อนมันไว้ แล้วค่อยเขียนสคริป เรียกโชตารางอีกที


ขอถามอีกอย่างนะครับ ใน innerhtml เรามีวิธีเขียนแบบเว้นบรรทัดได้ป่าวครับ ตอนนี้ที่ทำอยู่ innerhtml มันห้ามขึ้นบรรทัดใหม่เลยครับ ไม่งั้นโค้ดไม่ทำงั้น
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-10-22 12:01:54 By : theleng
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : สอบถาม js การสร้างปุ่มเพิ่ม listbox(ทั้งก้อน)หลังจากเลือกlistbox แล้วให้แสดงข้อความ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่