jquery Infinite cascading menu case sharing _jquery

See Phpcms Regional cascading menu, feeling write very interesting, say the general steps, save forget.

The generation of regional cascading menus is typically in the Areaid () function of the/data/cache_model/content_form.class.php file. However, this is just a cache as to where the build is not yet found, so temporarily as a test. (Know the classmate told me Ha!) Thank you very much)

Add in the $js of Areaid ()

Copy Code code as follows:

function Delchild (num)
{
$ (' #load_ $field Select '). each (function (i,obj) {
if (obj.id >num)
$ (' # ' +obj.id). Remove ();
})
}

corresponding, in/load.php elseif ($field = = ' Areaid ' && $value) modified

Copy Code code as follows:

$str =
' <select id= '. $id. ' "
Onchange= "Delchild ('. $id. '); $ (\ ' # '. $value. ') \ '). val (this.value); This.disabled=false;area_load (This.value); ><option
Value= "1" > $LANG [' please_select ']. ' </option> ';

You can remove the effect that cannot be changed after the selected area, and do not delete the extra selection boxes when there are no subordinate names.
The traditional cascading menu, individuals feel that the transmission of data is relatively large, and the association with the database does not seem to be good, so do not paste code.

Method Two:

Copy Code code as follows:

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ('. Menu Li '). Hover (function () {
$ (this). Children (' UL '). Show ();
$ (this). focus (). addclass (' Focusa ')
},function () {
$ (this). Children (' ul '). Hide ();
$ (this). focus (). Removeclass (' Focusa ');
});
});
</script>
<style type= "Text/css" >
ul{list-style:none; margin:0; padding:0;}
. menu {height:30px; line-height:30px;}
. menu Li {float:left; position:relative}/* This level is navigation/
. menu Li a {display:block; height:30px; line-height:30px; padding:0 20px; }
. menu Li a:hover {color: #000; Background:url (img/bg1.png);}
. menu Li A.more {background:url (img/there.png) no-repeat 130px Center;
. menu Li ul {position:absolute; float:left; width:150px; border:1px solid #000 Display:none;}/* This is the second level menu.
. Menu Li ul a {width:110px;}
. menu Li ul a:hover {background:url (img/bg1.png);}
. menu Li ul ul{top:0;left:150px}/* Starting from the third level menu, all the child menus are relative offset * *
</style>
<ul class= "Menu" >
<li><a href= "#" > Menu one </a>
<ul class= "One" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" class= "more" > menu five </a>
<ul class= "Two" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" class= "more" > menu five </a>
<ul class= "three" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" class= "more" > menu five </a>
<ul class= "Four" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" > Menu five </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" > Menu two </a>
<ul class= "One" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" class= "more" > menu three </a>
<ul class= "Two" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" class= "more" > menu three </a>
<ul class= "three" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" > Menu five </a></li>
</ul>
</li>
<li><a href= "#" > Menu four </a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" > Menu three </a></li>
<li><a href= "#" > Menu four </a></li>
<li><a href= "#" > Menu five </a>
<ul class= "One" >
<li><a href= "#" > Menu one </a></li>
<li><a href= "#" > Menu two </a></li>
<li><a href= "#" > Menu three </a></li>
</ul>
</li>
</ul>