PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

17 November 2009 By
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>






Tags:: textbox listbox jquery






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


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