PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

17 November 2009 By Ninenik Narkdee
jquery textbox listbox

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



ตัวอย่าง

เลือกรายการ

 

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







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