PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

17 November 2009 By
jquery listbox textbox

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



ตัวอย่าง

เลือกรายการ

 

สามารถนำไปประยุกต์ใช้ร่วมกับ 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>






Tags:: listbox textbox jquery






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


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