jQuery 文本框模擬下拉列表效果

2019-11-21 00:45:19

字體：大中小

來源：轉載

供稿：網友

網頁代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://img.VeVB.COm/jslib/jquery/jquery14.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>New Web Project</title> <script type="text/javascript" language="JavaScript"> $(document).ready(function(){ $('#test').val(''); //定義一個下拉按鈕層，并配置樣式(位置，定位點坐標，大小，背景圖片，Z軸)，追加到文本框后面 $DIV = $('<div></div>').css('position', 'absolute').css('left', $('#test').position().left + $('#test').width() - 15 + 'px').css('top', $('#test').position().top + 2 + 'px').css('background', 'transparent url(//m.survivalescaperooms.com/upload/2010-2/20100208074636483.gif) no-repeat top left').css('height', '16px').css('width', '15px').css('z-index', '100'); $('#test').after($DIV); //定義一個下拉框層，并配置樣式(位置，定位點坐標，寬度，Z軸)，先將其隱藏 $SELECT = $('<div></div>').css('position', 'absolute').css('border', '1px solid #000000').css('left', $('#test').position().left + 'px').css ('top', $('#test').position().top + $('#test').height() + 7 + 'px').css('width', $('#test').width() + 'px').css('z-index', '100'); $('#test').after($SELECT); $SELECT.hide(); //定義五個選項層，并配置樣式(寬度，Z軸一定要比下拉框層高)，添加name、value屬性，加入下拉框層 for (var i = 0; i <= 5; i++) { $OPTION = $('<div>option' + i + '</div>').attr('name', 'option').attr('value', 'value' + i).css('width', $SELECT.width()).css('z-index', $SELECT.css('z-index') + 1); $SELECT.append($OPTION); }; //選項層的鼠標移入移出樣式 $SELECT.mouseover(function(event){ if ($(event.target).attr('name') == 'option') { //移入時背景色變深，字色變白 $(event.target).css('background-color', '#000077').css('color', 'white'); $(event.target).mouseout(function(){ //移出是背景色變白，字色變黑 $(event.target).css('background-color', '#FFFFFF').css('color', '#000000'); }); } }); //鼠標進入修改背景圖位置 $DIV.mouseover(function(){ $DIV.css('background-position', ' 0% -16px'); }); //鼠標移出修改背景圖位置 $DIV.mouseout(function(){ $DIV.css('background-position', ' 0% -0px'); }); //鼠標按下修改背景圖位置 $DIV.mousedown(function(){ $DIV.css('background-position', ' 0% -32px'); }); //鼠標釋放修改背景圖位置 $DIV.mouseup(function(){ $DIV.css('background-position', ' 0% -16px'); $SELECT.show(); }); //通過點擊位置，判斷彈出的顯示 $(document).mouseup(function(event){ //如果是下拉按鈕層或下拉框層，則依然顯示下拉框層 if (event.target == $SELECT.get(0) || event.target == $DIV.get(0)) { $SELECT.show(); } else { //如果是選項層，則改變文本框的值 if ($(event.target).attr('name') == 'option') { //彈出value觀察 alert($(event.target).attr('value')); $('#test').val($(event.target).html()); } //如果是其他位置，則將下拉框層 if ($SELECT.css('display') == 'block') { $SELECT.hide(); } } }); }); </script> </head> <body> <input type="text" id="test" name="test" /> <button type="button" onclick="alert($('#test').serialize())">提交</button> 運行后，需要刷新一下， 才可以加載jquery</body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

用到的圖片：