This file was modified with the JquerySelect (single choice) simulation plug-in V1.3.4 of zhangjingwei. For more information, see. Single-choice Simulation Based on jQuery JavaScript Library v1.3.2
(This file was modified with the Jquery Select (single choice) simulation plug-in V1.3.4 of zhangjingwei)
A. The main reason for the modification is the display mode of the original zhangjingwei simulation. Misplacement may occur in the case of alternate text. Now, the display of the simulated DIV is changed to the inline mode. More naturally embedded in text lines.
B. After the file is loaded, select with the style 'commonselect' is automatically converted. Simplified call
C. Response to the select onchange () event. And small adjustment of width acquisition
Jquery. select. js
The Code is as follows:
/*
* JQuery. select. js
*/
JQuery. fn. sSelect = function (){
Var selectId = $ (this). attr ('id ');
Var selectZindex = (this).css ('z-Index ');
Var selectIndex = $ ('#' + selectId + '> select> option '). index ($ ('#' + selectId + '> select> option: selected') [0]);
$ ('#' + SelectId). append ('
');
$ ('#' + SelectId + '> p> h4 '). empty (). append ($ ('#' + selectId + '> select> option: selected '). text ());
Detail ('.dropselectbox'detail .css ("display", 'block ');
// Select the select width priority select style width-select automatic width-default value: 60
Var selectcssWidth = $ ('#' + selectId + '> select'0000.css ('width ');
SelectcssWidth = typeof (selectcssWidth) = 'undefined '? 0: parseInt (selectcssWidth. replace ('px ', '') + 5;
Var selectWidth = selectcssWidth? SelectcssWidth: ($ ('#' + selectId + '> select'). width ()> 0? $ ('#' + SelectId + '> select'). width () + 5: 60 );
(('{'{Selectid}.css ("margin-right", selectWidth); // modify the offset
$ ('#' + SelectId + '> p> h4'0000.css ("width", selectWidth ); // assign the original select width to the generated select (not the total width of h4)
$ ('#' + SelectId + '> p> ul'0000.css ("width", selectWidth); // assign the total width of h4 to Ul
$ ('#' + SelectId + '> select'). hide ();
$ ('#' + SelectId + '> p'). hover (function (){
$ ('#' + SelectId + '> p> h4'). addClass ("over ");
$ ('#' + SelectId + '> p> span'). addClass ("over ");
}, Function (){
$ ('#' + SelectId + '> p> h4'). removeClass ("over ");
$ ('#' + SelectId + '> p> span'). removeClass ("over ");
});
$ ('#' + SelectId)
. Bind ("focus", function (){
_ ClearSelectMenu ();
$ ('#' + SelectId + '> p> h4'). addClass ("over ");
$ ('#' + SelectId + '> p> span'). addClass ("over ");
})
. Bind ("click", function (e ){
// $ ('# Value2'). append ('click:' + selectIndex +'
');
If ($ ('#' + selectId + '> p> ul'wash.css ("display") = 'block '){
_ ClearSelectMenu (selectId );
Return false;
} Else {
If ($. browser. opera) {__ clearSelectMenu ();}
$ ('#' + SelectId + '> p> h4'). addClass ("current ");
$ ('#' + SelectId + '> p> span'). addClass ("over"). addClass ("current ");
$ ('#' + SelectId + '> p> ul'). show ();
Var selectZindex = (this).css ('z-Index ');
If ($. browser. msie | $. browser. opera ){
$ ('. Dropdown'). removeClass ('overclass ');
}
$ ('#' + SelectId). addClass ('overclass ');
_ SetSelectValue (selectId );
Var windowspace = ($ (window). scrollTop () + document.doc umentElement. clientHeight)-$ (this). offset (). top;
Var ulspace = $ ('#' + selectId + '> p> ul'). outerHeight (true );
Var windowspace2 = $ (this). offset (). top-$ (window). scrollTop ()-ulspace;
If (windowspace <ulspace & windowspace2> 0 ){
$ ('#' + SelectId + '> p> ul'mirror.css ({top:-ulspace });
} Else {
$ ('#' + SelectId + '> p> ul'mirror.css ({top: $ (' # '+ selectId +'> p> h4 '). outerHeight (true )});
}
SelectIndex = $ ('#' + selectId + '> p> ul> li'). index ($ ('. selectedli') [0]);
$ (Window). scroll (function (){
Var windowspace = ($ (window). scrollTop () + document.doc umentElement. clientHeight)-$ ('#' + selectId). offset (). top;
Var ulspace = $ ('#' + selectId + '> p> ul'). outerHeight (true );
If (windowspace <ulspace ){
$ ('#' + SelectId + '> p> ul'mirror.css ({top:-ulspace });
} Else {
$ ('#' + SelectId + '> p> ul'mirror.css ({top: $ (' # '+ selectId +'> p> h4 '). outerHeight (true )});
}
});
// Respond to the mouse and click to select
$ ('#' + SelectId + '> p> ul> li'). click (function (e ){
SelectIndex = $ ('#' + selectId + '> p> ul> li'). index (this );
// $ ('# Value2'). append ('click with the mouse:' + selectIndex +'
');
$ ('#' + SelectId + '> select') [0]. selectedIndex = selectIndex;
$ ('#' + SelectId + '> p> h4 '). empty (). append ($ ('#' + selectId + '> select> option: selected '). text ());
_ ClearSelectMenu (selectId, selectZindex );
E. stopPropagation ();
E. cancelbubble = true;
// SELECT onchange event
$ ('#' + SelectId + '> select'). change ();
})
. Hover (
Function (){
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
$ (This). addClass ("over"). addClass ("selectedli ");
SelectIndex = $ ('#' + selectId + '> p> ul> li'). index (this );
},
Function (){
$ (This). removeClass ("over ");
}
);
// End
};
E. stopPropagation ();
})
. Bind ("mousewheel", function (){
// Scroll wheel may be supported later
/* $ ('#' + SelectId + '> p> ul> li'). hover (
Function (){
Return false;
},
Function (){
Return false;
}
);*/
})
. Bind ("dblclick", function (){
_ ClearSelectMenu ();
Return false;
})
. Bind ("keydown", function (e ){
// Var hotkeys = e. keyCode;
$ (This). bind ('keylow', function (e ){
If (e. keyCode = 40 | e. keyCode = 38 | e. keyCode = 35 | e. keyCode = 36 ){
Return false;
}
});
Switch (e. keyCode) {// you can specify the case range if it is set to true.
Case 9:
Return true;
Break;
Case 13:
// Enter
// $ ('# Value2'). append ('value received by press Enter:' + selectIndex +'
');
_ ClearSelectMenu ();
Break;
Case 27:
// Esc
_ ClearSelectMenu ();
Break;
Case 33:
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
SelectIndex = 0;
_ KeyDown (selectId, selectIndex );
Break;
Case 34:
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
SelectIndex = ($ ('#' + selectId + '> select> option'). length-1 );
_ KeyDown (selectId, selectIndex );
Break;
Case 35:
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
SelectIndex = ($ ('#' + selectId + '> select> option'). length-1 );
_ KeyDown (selectId, selectIndex );
Break;
Case 36:
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
SelectIndex = 0;
_ KeyDown (selectId, selectIndex );
Break;
Case 38:
// Up
// $ ('# Value2'). append ('original value:' + selectIndex +'
');
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
If (selectIndex = 0 ){
SelectIndex = 0;
} Else {
SelectIndex --;
};
// $ ('# Value2'). append ('aa value changed upwards:' + selectIndex + '');
_ KeyDown (selectId, selectIndex );
Break;
Case 40:
// Down
// $ ('# Value2'). append ('passed:' + selectIndex + '');
$ ('#' + SelectId + '> p> ul> li'). removeClass ("over ");
If (selectIndex = ($ ('#' + selectId + '> select> option'). length-1 )){
SelectIndex = $ ('#' + selectId + '> select> option'). length-1;
} Else {
SelectIndex ++;
};
// $ ('# Value2'). append ('downward changed aa value:' + selectIndex + '');
_ KeyDown (selectId, selectIndex );
Break;
/* Case (hotkeys> 47 & hotkeys <59) | (hotkeys> 64 & hotkeys <91) | (hotkeys> 96 & hotkeys <123 )):
// Reserved API for first subtitle Query
// Character = String. fromCharCode (hotkeys). toLowerCase ();
Return false;
Break ;*/
Default:
Return false;
Break;
};
})
. Bind ("blur", function (){
_ ClearSelectMenu (selectId, selectZindex );
Return false;
});
// Disable Selection
$ ('. Dropselectbox'). bind ("selectstart", function (){
Return false;
});
};
Function _ clearSelectMenu (selectId, selectZindex ){
// $ ('# Value2'). append ('remove focus:' + selectIndex +'
');
$ ('. Dropselectbox> ul'). empty (). hide ();
$ ('. Dropselectbox> h4'). removeClass ("over"). removeClass ("current ");
$ ('. Dropselectbox> span'). removeClass ("over ");
$ ('#' + SelectId). removeClass ('overclass ');
}
Function _ setSelectValue (sID ){
$ ('#' + SID + '> p> ul'). empty ();
$. Each ($ ('#' + sID + '> select> option'), function (I ){
$ ('#' + SID + '> p> ul'). append ("
"+ $ (This). text () +"");
});
$ ('#' + SID + '> p> h4 '). empty (). append ($ ('#' + sID + '> select option: selected '). text ());
$ ('#' + SID + '> p> ul> li '). eq ($ ('#' + sID + '> select') [0]. selectedIndex ). addClass ("over "). addClass ("selectedli ");
}
Function _ keyDown (sID, selectIndex ){
$ ('#' + SID + '> select') [0]. selectedIndex = selectIndex;
$ ('#' + SID + '> p> ul> li: eq (' + selectIndex + '). toggleClass ("over ");
$ ('#' + SID + '> p> h4 '). empty (). append ($ ('#' + sID + '> select option: selected '). text ());
// SELECT onchange event
$ ('#' + SID + '> select'). change ();
}
/* Automatic call */
$ (Document). ready (function (){
Var s = new Array ();
Var t = document. getElementsByTagName ('select ');
Var j = 0;
For (var I = 0; I If (t [I]. className = 'commonselect '){
S [j] = t [I];
J ++;
}
}
If (j = 0) return;
Var k = m = null;
For (var I = 0; I K = s [I]. parentNode;
M = createDiv (k, I );
// S [I]. replaceNode (m );
K. replaceChild (m, s [I])
M. appendChild (s [I]);
$ ('# Selectbox' + I). sSelect ();
}
Function createDiv (p, I ){
Var p = document. createElement ('P ');
P. className = 'dropdown ';
P. id = 'selectbox' + I;
P. innerHTML = '';
P. appendChild (p );
Return p;
}
})
HTML Application
The Code is as follows:
JQuery SELECT single-choice Simulation
