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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
listbox textbox jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ listbox textbox 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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











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