用jquery類比select實現下拉樹形菜單。

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

之前隨便寫寫，發現需要的人挺多，抽了點時間寫了個完整的已上次到資源。 http://download.csdn.net/source/3461323

首先感謝http://www.codesky.net/article/doc/200810/200810166672871.htm 的作者。控制項原理就請到原文去看了。

網上找了一下。etx也有類似的控制項，無奈它的類庫實在是不小，就自己封裝了一個。

HTML代碼

<head>

initSelect("departmentId","terminal-planning!loadTree.action");// 這裡後面一個url是jstree 獲得json的後台。

}

//用DIV類比出樹形select
function Offset(e)
{
//取標籤的絕對位置
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
  t+=e.offsetTop;
  l+=e.offsetLeft;
}
return {
  top : t,
  left : l,
  width : w,
  height : h
}
}
function initSelect(obj,url){
//取得select標籤的位置。obj:頁面上被替代的select id.url：jsTree 獲得json後台
var $selectObj = $("#"+obj);
var offset=Offset($selectObj.get(0)); //取得Select所在的位置
$selectObj.css("display","none");//隱藏原來的select
var $iDiv = $("<div id='selectof"+obj+"'></div>");//類比一個div替代select
$iDiv.css("position","absolute");
$iDiv.css("top",offset.top+"px");
$iDiv.css("left",offset.left+"px");
$iDiv.css("width",offset.width+"px");
$iDiv.css("height",offset.height+"px");
$iDiv.css("background","url(images/icon_select.gif) no-repeat right 4px");
$iDiv.css("border","1px solid #3366ff");
$iDiv.css("fontSize","12px");
$iDiv.css("lineHeight",offset.height+"px");
$iDiv.css("textIndent","4px");
$("body").append($iDiv);
//滑鼠事件
$iDiv.get(0).onmouseover=function(){//滑鼠移到
  $iDiv.css("background","url(images/icon_select_focus.gif) no-repeat right 4px");
  }
$iDiv.get(0).onmouseout=function(){//滑鼠移走
  $iDiv.css("background","url(images/icon_select.gif) no-repeat right 4px");
  }
$iDiv.click(function(){
  if($("#selectchild"+obj).length==1){
   //判斷是否建立過彈出層div
   if(($("#selectchild"+obj+":hidden").length==1)){
    //開啟
    $("#selectchild"+obj).css("display","block");
   }else{
    //隱藏
    $("#selectchild"+obj).css("display","none");
   }
  }else{
   //初始一個div放在上一個div下邊，當options的替身。
   var $cDiv = $("<div id='selectchild"+obj+"'></div>");
   $cDiv.css("position","absolute");
   $cDiv.css("top",offset.top+offset.height+2+"px");
   $cDiv.css("left",offset.left+"px");
   $cDiv.css("width",offset.width+"px");
   $cDiv.css("background","#f7f7f7");
   $cDiv.css("border","1px solid silver");
   $deptDiv = $("<div></div>")
   //產生jsTree
   conf={data:{
    type:"json",
    url:url
    },
    callback:{
      onchange    : function(node) {
      $iDiv.text($("#"+node.id+">a:eq(0)").text());
      //將選中的ID寫進原來的select
      $Option = $("<option value="+node.id+"selected='true'></option>");
      $("#"+obj).append($Option);
      $cDiv.css("display","none");
     }
    }
   };
   var treeFunc = $.tree_create();
   treeFunc.init($deptDiv, $.extend({},conf));
   $cDiv.append($deptDiv);
   $("body").append($cDiv);
  }
})
}

</script>
</head>
<body>

</body>

就這麼簡單，不過先要會用jstree.

效果看圖(截得很爛)，可相容支援其他樹哦。

展開節點的樣子

單擊選中收合

之前隨便寫寫，發現需要的人挺多，抽了點時間寫了個完整的已上次到資源。 http://download.csdn.net/source/3461323

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

用jquery類比select實現下拉樹形菜單。

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support