PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย

02 April 2009 By
ตัวเลือก jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตัวเลือก jquery



ตัวอย่าง

  • data1
  • data2
  • data3
  • data4
  • data5
  • data6


CSS Code

<style type="text/css">
/* กำหนด style ให้กับรายการตัวเลือก */
ul.myUL1{
	margin:0px;
	padding:0px;
	font-size:12px;
	width:200px;
	color:#FFFFFF;
	background-color:#666666;
	border:2px solid #000000;
	position:absolute;
	display:none;
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล
โดยเอา comment สองบรรทัดล่างนี้ออก */	
/*	height:80px;
	overflow:auto;*/
}
ul.myUL1 li{
	margin:0px;
	padding:0px;
	cursor:pointer;
	text-indent:5px;
}
ul.myUL1 li:hover{
	margin:0px;
	padding:0px;
	cursor:pointer;
	background-color:#CCCCCC;
	color:#000000;
}
</style>

HTML Code

<!--รายการสำหรับให้เลือก-->
<ul class="myUL1">
<li>data1</li>
<li>data2</li>
<li>data3</li>
<li>data4</li>
<li>data5</li>
<li>data6</li>
</ul>
<form id="form1" name="form1" method="post" action="">
 <input name="data1" type="text" id="data1" />
<br />
<br />
  <input type="submit" name="Submit" value="Submit" />
</form>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	var obj1="input#data1"; // กำหนด object  เป้าหมาย
	var obj2="ul.myUL1"; // กำหนด object รายการตัวเลือก
	$(obj1).focus(function(){
		var nX=$(this).offset().left;
		var nY=$(this).offset().top+($(this).height()+6);
		$(obj2).show().css({
			"left":nX,
			"top":nY
		});
	});
	$(obj2).children("li").click(function(){
		$(obj1).val($(this).text());
		$(obj2).hide();
	});
	$(obj2).hover(function(){
		$(this).show();	
	},function(){
		$(this).hide();
		$(obj1).blur();
	});
});
</script>







Tags:: ตัวเลือก jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง