PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


ถามการทำ chain select ในกรณี ที่ select เป็น array

ถามการทำ chain select ในกรณี ที่ select เป็น array

 คือจาก http://www.ninenik.com/forum_view_328_1.html

การทำเพิ่มลบแถวในตารางต้องการนำมาต่อยอด  
ในกรณีที่ ข้อมูลที่ add เข้ามาเป็น select box ให้เลือก โดยที่ เลือก select 1 จะมีผลต่อข้อมูลที่จะโชว์ ใน select 2
เช่น
select 1 เป็น ข้อมูลหน่วยงาน
select 2 เป็น เอกสาร
ถ้าเลือก หน่วยงาน A ก็จะ select เอกสารทั้งหมดของหน่วยงาน A จาก database มา โชว์ ใน select 2

แต่กรณีนี้ select box มันเป็น array ผมสามารถ อ้างถึง select 2 ที่ตำแหน่งเดียวกับ select 1 ได้อย่างไรครับ
ในกรณี jquery ใช้ $(".select1").change  ที่ select 1 ได้ ลอง alert ค่า $(this).val()  ค่าที่โชว์ เป็นของ select 1 ถูกต้อง

แต่จะอ้างถึง select 2 อย่างไร ให้ตำแหน่งมันตรงกัน

 



โดย:  Likito IP: 110.164.187.xxx วันที่: 07-12-2010 เวลา: 08:40:28

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3

 test



โดย:  Clubbank IP: 115.87.231.xxx วันที่: 28-04-2011 เวลา: 13:03:42
 ความคิดเห็นที่ 2

 ขอบคุณครับ



โดย:  Likit IP: 110.164.187.xxx วันที่: 07-12-2010 เวลา: 09:46:58
 ความคิดเห็นที่ 1

 หา index ตำแแหน่งของ select ตัวแรก แล้วไปใช้อ้างอิงกับ index ของ select ตัวที่สองได้

โดยเพิ่ม class ให้กับ select ทั้งสองตัว ตามตัวอย่างโค้ด ลองเอาประยุกต์เพิ่มเติมดู
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr id="firstTr">
    <td width="119"><select name="data1[]" id="data1[]" class="obj_01">
      <option value="1">data1</option>
      <option value="2">data2</option>
    </select></td>
    <td width="519"><input type="text" name="data2[]" id="data2[]" />
      <select name="data3[]" id="data3[]" class="obj_02">
      <option value="1">data1</option>
      <option value="2">data2</option>      
      </select></td>
    </tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <button id="Submit" type="submit">Submit</button>    
    </td>
  </tr>
</table>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#addRow").click(function(){
		$("#myTbl").append($("#firstTr").clone());
	});
	$("#removeRow").click(function(){
		if($("#myTbl tr").size()>1){
			$("#myTbl tr:last").remove();
		}else{
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});	
	
	$(".obj_01").live("change",function(){
		var indexObj=$(".obj_01").index(this);
		$(".obj_02").eq(indexObj).val($(this).val());
	});
	
});
</script>
ตัวอย่าง

       


โดย:  Ninenik IP: 183.89.174.xxx วันที่: 07-12-2010