本文實例講述了jQuery實現(xiàn)輸入框下拉列表樹插件。分享給大家供大家參考。具體如下：
這是一款基于jquery實現(xiàn)的下拉列表樹插件源碼，是一款實用的jquery 樹形下拉框下拉樹代碼。點擊文本框即可彈出樹形下拉列表，單擊列表項即可選中列表對應(yīng)文字，是一款非常實用的特效源碼。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery實現(xiàn)輸入框下拉列表樹插件代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery實現(xiàn)輸入框下拉列表樹插件代碼</title><link href="css/dtreeck.css" type="text/css" rel="stylesheet" /></head><body><!--代碼部分begin--><table width="100%" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="1" valign="top" width="35%" style="padding-left: 30px;"> </td> <td valign="top" height="65%" align="left"> <form method="post" id="regform"> <table width="70%" cellpadding="1" cellspacing="0" border="0" style="margin-top: 10px;"> <tr> <td width="20%" align="right"> 父 菜 單： </td> <td width="30%" align="left"> <input type="text" id="menu_parent_name" style="width: 150px;"> <input type="hidden" id="menu_parent" name="menu_parent"> <input type="hidden" id="oprate" name="oprate"> <input type="hidden" id="menu_id" name="menu_id"> </td> <td width="20%" align="right"> </td> <td width="30%" align="left"> </td> </tr> </table> </form> </td> </tr></table><script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script><script src="js/dtreeck.js"></script><div id="treediv"> <div align="right"> <a href="javascript:viod(0);" id="closed"><font color="#000">關(guān)閉</font></a> </div> <script src="js/lanren.js"></script></div> <script>//生成彈出層的代碼<!-- 彈出層-->xOffset = 0;//向右偏移量yOffset = 25;//向下偏移量var toshow = "treediv";//要顯示的層的idvar target = "menu_parent_name";//目標(biāo)控件----也就是想要點擊后彈出樹形菜單的那個控件id$("#"+target).click(function (){ $("#"+toshow) .css("position", "absolute") .css("left", $("#"+target).position().left+xOffset + "px") .css("top", $("#"+target).position().top+yOffset +"px").show();});//關(guān)閉層$("#closed").click(function(){ $("#"+toshow).hide();});//判斷鼠標(biāo)在不在彈出層范圍內(nèi) function checkIn(id){ var yy = 20; //偏移量 var str = ""; var x=window.event.clientX; var y=window.event.clientY; var obj=$("#"+id)[0]; if(x>obj.offsetLeft&&x<(obj.offsetLeft+obj.clientWidth)&&y>(obj.offsetTop-yy)&&y<(obj.offsetTop+obj.clientHeight)){ return true; }else{ return false; } } //點擊body關(guān)閉彈出層 $(document).click(function(){ var is = checkIn("treediv"); if(!is){ $("#"+toshow).hide(); } });<!-- 彈出層-->//生成彈出層的代碼//點擊菜單樹給文本框賦值------------------菜單樹里加此方法function setvalue(id,name){ $("#menu_parent_name").val(name); $("#menu_parent").val(id); $("#treediv").hide();}</script><!--代碼部分end--></body></html>
以上就是為大家分享的jQuery實現(xiàn)輸入框下拉列表樹插件代碼，希望大家可以喜歡。
新聞熱點
疑難解答
