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

17 November 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

textbox jquery listbox

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

ดูแล้ว 19,051 ครั้ง

ตัวอย่าง

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