พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery

17 November 2009 By Ninenik Narkdee
textbox listbox jquery

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



ตัวอย่าง

เลือกรายการ

 

สามารถนำไปประยุกต์ใช้ร่วมกับ ajax เพิ่มทำการบันทึกในฐานข้อมูล

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	$("select#Datalist").change(function(){
		if($("select#Datalist option:selected").val()=="add"){
			$("select#Datalist").hide();
			$("input#addList").show();
			$("input#addButton").show();
		}
	});
	$("input#addButton").live("click",function(){
		var newOption="<option value=\""+$("input#addList").val()+"\" selected=\"selected\">"+$("input#addList").val()+"</option>";
		$("select#Datalist").show();
		$("select#Datalist option:last").after(newOption);
		$("input#addList").val("").hide();
		$("input#addButton").hide();
	});
});  
</script> 

HTML Code

<form id="form1" name="form1" method="post" action="">
  เลือกรายการ
<select name="Datalist" id="Datalist" style="width:180px;">
	 <option value="">เลือกรายการ</option>  
    <option value="add">เพิ่มข้อมูล</option>  
    <option value="รายการที่ 1">รายการที่ 1</option>
</select>
  <input type="text" name="addList" id="addList" style="width:180px;display:none;" />
  <input type="button" name="addButton" id="addButton" value="Add" style="display:none;"  />
</form>


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





Tags:: jquery textbox listbox







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ