Home > Others

Use jquery to simulate select to implement a drop-down tree menu.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I wrote it casually before and found that there were a lot of people who needed it. I took some time to write a complete resource that had been reached by the previous time. Http://download.csdn.net/source/3461323

First of all, I would like to thank the author of the http://www.codesky.net/article/doc/200810/200810166672871.htm. For the control principle, go to the original article.

I found it online. Etx also has similar controls, but its class library is not small, so it encapsulates one by itself.

HTML code

<Head>

<! -- Jquery jstree control -->

<LINK rel = "stylesheet" type = "text/CSS" href = "$ {CTX}/JS/jstree/tree_component.css"/>
<SCRIPT type = "text/JavaScript" src = "$ {CTX}/JS/jstree/CSS. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "$ {CTX}/JS/jstree/tree_component.min.js"> </SCRIPT>

<SCRIPT src = "$ {CTX}/JS/jquery. js" type = "text/JavaScript"> </SCRIPT>

 

<SCRIPT type = "text/JavaScript">
Jquery (document). Ready (function (){

Initselect ("dimension mentid", "terminal-planning! Loadtree. Action "); // the following URL is the background for jstree to obtain JSON.

}

 

// Use Div to simulate the tree select
Function offset (E)
{
// Obtain the absolute position of the tag
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 ){
// Obtain the position of the select tag. OBJ: Select ID on the page. url: jstree to get the JSON background
VaR $ selectobj = $ ("#" + OBJ );
VaR offset = offset ($ selectobj. Get (0); // obtain the position of the SELECT statement.
Optional selectobj.css ("display", "NONE"); // hide the original select
VaR $ idiv = $ ("<Div id = 'selectof" + OBJ + "'> </div>"); // simulate a div to replace 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 );
// Mouse event
$ Idiv. Get (0). onmouseover = function () {// move the cursor over
$Idiv.css ("background", "URL (images/icon_select_focus.gif) No-repeat right 4px ");
}
$ Idiv. Get (0). onmouseout = function () {// move the mouse
$Idiv.css ("background", "URL (images/icon_select.gif) No-repeat right 4px ");
}
$ Idiv. Click (function (){
If ($ ("# selectchild" + OBJ). Length = 1 ){
// Determine whether a pop-up layer Div has been created
If ($ ("# selectchild" + OBJ + ": hidden"). Length = 1 )){
// Open
$ ("# Selectchild" Export obj).css ("display", "Block ");
} Else {
// Hide
$ ("# Selectchild" Export obj).css ("display", "NONE ");
}
} Else {
// Initially, a div is placed under the previous Div and used as an alternative to options.
VaR $ cdiv = $ ("<Div id = 'selectchild" + OBJ + "'> </div> ");
Using cdiv.css ("position", "absolute ");
Export 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> ")
// Generate jstree
Conf = {data :{
Type: "JSON ",
URL: URL
},
Callback :{
Onchange: function (node ){
$ Idiv. Text ($ ("#" + node. ID + "> A: eq (0)"). Text ());
// Write the selected ID to the original 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>

<Table>
<Tr>
<TD>
<Select id = "departmentid" name = "departmentid" style = "width: 200px"> </SELECT>
</TD>
</Tr>
</Table>

</Body>

 

This is simple, but we need to use jstree first.

The effect is shown in the figure (the screenshot is too bad). It is compatible with other trees.

 

 

Expand a node

Click hide

I wrote it casually before and found that there were a lot of people who needed it. I took some time to write a complete resource that had been reached by the previous time. Http://download.csdn.net/source/3461323

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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