本文分享一段程式碼實例,它能夠點擊文字框的時候,能夠彈出下拉的checkbox複選框,選中復選框就能夠將值寫入文本框中,可能在實際應用中的效果沒有這麼直白簡單,不過可以作為一個例子來演示,以便於學習者理解和擴展。
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
|
以上程式碼實現了我們的要求,以下介紹一下它的實作過程。
程式碼註解:
1.$(function(){}),當文件結構完全載入完畢再去執行函數中的程式碼。
2.var position=$("#xx").offset(),取得文字方塊相對於document文件的偏移量,offset()函數傳回的是一個對象,此物件包含兩個屬性left和top,分別表示相對於文件的水平和垂直偏移量。
3.$("#div1").offset({top:position.top+22,left:position.left}),設定彈出下拉式選單容器的相對文件的偏移量,第一個加22是為了使其在文字方塊的下方顯示。
4.$("#xx").click(function(){$("#NG").toggleClass("open");}),為文字方塊註冊click事件處理函數,點選它可以切換樣式類別open刪除和添加,也就是設定下拉選單的顯示和隱藏。
5.$("#div1 input[name=ng]").click(function(){ }),為name屬性值為ng的文字方塊註冊click事件處理函數。
6.var arr=new Array(),建立一個數組,用來存放選取checkbox複選框的value值。
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),將選取的複選框的值存入數組。
8.$("#xx").val(arr.join(","));,將陣列元素連接成字串寫入文字方塊。
希望本文所述對大家學習javascript程式設計有所幫助。