Category Archives: บทความ jQuery

บทความ jQuery The Write Less, Do More, JavaScript Library

การ Get Index Of Element ด้วย Jquery

Posted on by

Jquery Get Index Of Element

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
	$('.c_book').live('click',function(){
		var ind = $('.c_book').index(this);
		var val = $('.c_book').eq(ind).val();
		alert('index = '+ind+' , value = '+val);
	});
});
</script>
</head>
<body>
<div>
checkbox1 :: <input name="cb" class="c_book" type="checkbox" value="v1">
checkbox2 :: <input name="cb" class="c_book" type="checkbox" value="v2">
checkbox3 :: <input name="cb" class="c_book" type="checkbox" value="v3">
checkbox4 :: <input name="cb" class="c_book" type="checkbox" value="v4">
checkbox5 :: <input name="cb" class="c_book" type="checkbox" value="v5">
<div>
</body>
</html>

Jquery Listbox Dynamic 2 Level

Posted on by

ในที่นี้จะยกตัวอย่างการทำ Listbox Dynamic 2 Level จาก Array แทนการใช้ฐานข้อมูลจริง แต่สามารถนำไปประยุกต์ใช้กับฐานข้อมูลจริงได้

ไฟล์ 2level.php

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>http://www.mainacup.com/</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#band").change(function(){
		var datalist = $.ajax({	
			  url: "getdata.php", 
			  data:"bandid="+$(this).val(),
			  async: false
		}).responseText;
		$("#song").html(datalist); 

	});
});
</script>
</head>
<body>
Band ::
<select name="band" id="band">
  <option value="0">++++++++Please Select Band+++++++++++</option>
  <option value="1">Linkinpark</option>
  <option value="2">GreenDay</option>
  <option value="3">BigAss</option>
  <option value="4">Kala</option>
</select>
<br>
Song ::
<select name="song" id="song">
  <option value="0">---------------Please Select Song-----------------</option>
</select>
</body>
</html>

ไฟล์ getdata.php

<?php
header("Content-type:text/html; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$bandid = $_GET['bandid'];
$array_sublevel = array(
				'',
				array('In The End','Somewhere I Belong','A Place For My Head'),
				array('Holiday','Wake Me Up When September Ends','21 Guns'),
				array('เกิดมาแค่รักกัน','คนไม่เอาถ่าน','เล่นของสูง'),
				array('ขอเป็นตัวเลือก','รอ','ยิ่งเดินยิ่งไกล')
);
?>
 <option value="0">---------------Please Select Song-----------------</option>
<?php
foreach($array_sublevel[$bandid] as $key => $val){
  ?>
<option><?=$val;?></option>
<?php } ?>

***Download Script***