Js custom linkage drop-down box

I think this drop-down box can satisfy the aesthetic needs a little,

 

This is the effect of clicking, writing the keyboard direction keys, press enter, esc and other events, and can judge whether to display up based on the distance at the bottom of the page

Today, I got a linkage. By the way, I posted some code.

Effect preview:

 

The following code solves ie6 compatibility issues
Copy codeThe Code is as follows:
$ ContainerDivText. mousedown (function (){
SetTimeout (
Function (){
If ($ newUl [0]. style. display = 'block '){
$ NewUl. hide ();
PositionHideFix ();
Return false;
}
$ ContainerDiv. focus ();
// Show list
$ NewUl. slideDown (100 );
PositionFix ();
// When keys are pressed
Document. onkeydown = function (e ){
If (e = null) {// ie
Var keycode = event. keyCode;
} Else {// everything else
Var keycode = e. which;
}
// Enter key or esc key pressed, hide list
If (keycode = 13 | keycode = 27 ){
$ NewUl. hide ();
PositionHideFix ();
Return false;
}
}
}, 1 );
// The function settimeout is used for ie6, because if you click the element where you hava focused on the element,
// Ie6 wowould think you click it twice)
});

The following code solves the problem of insufficient event definition functions in the drop-down box:
Code
Copy codeThe Code is as follows:
If (! Opts. callbackfn ){
$ NewLi. click (function (e ){
Var $ clickedLi = jQuery(e.tar get ),
Text = $ clickedLi. text ();
// Update counter
CurrentIndex = $ newLi. index ($ clickedLi );
// Remove all hilites, then add hilite to selected item
$ NewLi. removeClass ('hilite ');
$ ClickedLi. addClass ('hilite ');
SetSelectText (text );
$ NewUl. hide ();
$ContainerDiv.css ('position', 'static '); // ie
});
} Else {
$ NewLi. click (function (e ){
Var $ clickedLi = jQuery(e.tar get ),
Text = $ clickedLi. text ();
// Update counter
CurrentIndex = $ newLi. index ($ clickedLi );
// Remove all hilites, then add hilite to selected item
$ NewLi. removeClass ('hilite ');
$ ClickedLi. addClass ('hilite ');
SetSelectText (text );
$ NewUl. hide ();
$ContainerDiv.css ('position', 'static '); // ie
(Opts. callbackfn) (this. value );
});
} // Param callbackfn means you can define a event function from every li in the ul; (2010-2-4)

Then there is the page application,

Code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery (document). ready (function (){
JQuery ("# my-dropdown2"). hide ();
JQuery (# my-dropdown1). sSelect (
{Defatext text :"",
Callbackfn: function (value ){
If (value = 1 ){
JQuery ("# my-dropdown2_list"). parent (). remove ();
JQuery ("# linkc_value"). val (value );
Return;
}
JQuery. getJSON (
'/Department. mvc/GetSubDepartment? Required mentid = '+ value,
Function (list ){
JQuery ("# my-dropdown2_list"). parent (). remove ();
JQuery ("# my-dropdown2" ).html ("");
Var temp = "";
Temp + = "<option value =''> select a department </option> ";
For (var I = 0; I <list. length; I ++ ){
Temp + = "<option value =" + list [I]. inclumentid + ">" + list [I]. DepartmentName + "</option> ";
}
JQuery ("# my-dropdown2" cmd.html (temp );
JQuery ("# my-dropdown2"). show ();
JQuery (# my-dropdown2). sSelect ({
Callbackfn: function (value ){
JQuery ("# linkc_value"). val (value );
}
});
}
);
}
}
);
// KillErrors = function () {return true ;}
// Window. onerror = killErrors;
});
Function linkc (){
Location. href = "/User. mvc/Front? Extends mentid = "+ jQuery (" # linkc_value "). val ();
}
</Script>

These three parts are only part
However, it takes a lot of time for other codes to leave a message...