点击
这里下载完整源代码
在Web开发中,为了追求界面上的美观,有时候我们需要改变一些控件的呈现外观,通常我们可以通过CSS很方便的达到所需效果,但是对于一些控件缺令Web开发人员非常伤脑筋,比如想要更改下拉框的边框或者下拉箭头的演示,用CSS就非常难实现,这时候只能靠程序代码对系统默认下拉框控件进行模拟,有很多模拟方式都可以达到这一目的,但是本文,笔者对众多方案进行深入研究和权衡后,提出一种性能卓越的解决方案:
请看实际效果:
<script type="text/javascript">var imgPath = "https://i-blog.csdnimg.cn/blog_migrate/2e4a663abfe6d0fec491c540f72d9d8a.gif"; var blOut = true; var nowOpenedSelectBox = null; function gid(id){ return document.getElementById?document.getElementById(id):null;} function initSelect(id, width, height) { var sel = gid(id); var a = sel.options; var oTable,oTBody, oRow, oCell,oSelect; if(!gid('O' + id )) { var strWidth = ""; if(width != null) strWidth=width+"px"; else strWidth = gid(id).offsetWidth + "px"; var strWidth2 = parseInt(strWidth) - 22 + 'px'; var arr = new Array(a.length); for (var i=0,j=a.length;i " + HtmlEncode(a[i].text) + ""; } // 虽然用insertAdjacentElement可以获得更好的性能,但是由于如果用insertAdjacentElement势必多次使用innerHTML处理,因此就全局来看这里调用1次insertAdjacentElement,反而取得更好的效果。 sel.insertAdjacentHTML("beforeBegin","
/
/
/
/
"); } else { oSelect = gid('O' + id ); var arr = new Array(a.length); for (var i=0,j=a.length;i
" + a[i].text + ""; } oSelect.parentNode.innerHTML = "
1 <script type="text/javascript">initSelect('Demo_Select');document.body.οnclick=function(){HideSel(event);};</script>
根据索引值调整选中项:
根据value值调整选中项:
在Web开发中,为了追求界面上的美观,有时候我们需要改变一些控件的呈现外观,通常我们可以通过CSS很方便的达到所需效果,但是对于一些控件缺令Web开发人员非常伤脑筋,比如想要更改下拉框的边框或者下拉箭头的演示,用CSS就非常难实现,这时候只能靠程序代码对系统默认下拉框控件进行模拟,有很多模拟方式都可以达到这一目的,但是本文,笔者对众多方案进行深入研究和权衡后,提出一种性能卓越的解决方案:
请看实际效果:
<script type="text/javascript">var imgPath = "https://i-blog.csdnimg.cn/blog_migrate/2e4a663abfe6d0fec491c540f72d9d8a.gif"; var blOut = true; var nowOpenedSelectBox = null; function gid(id){ return document.getElementById?document.getElementById(id):null;} function initSelect(id, width, height) { var sel = gid(id); var a = sel.options; var oTable,oTBody, oRow, oCell,oSelect; if(!gid('O' + id )) { var strWidth = ""; if(width != null) strWidth=width+"px"; else strWidth = gid(id).offsetWidth + "px"; var strWidth2 = parseInt(strWidth) - 22 + 'px'; var arr = new Array(a.length); for (var i=0,j=a.length;i " + HtmlEncode(a[i].text) + ""; } // 虽然用insertAdjacentElement可以获得更好的性能,但是由于如果用insertAdjacentElement势必多次使用innerHTML处理,因此就全局来看这里调用1次insertAdjacentElement,反而取得更好的效果。 sel.insertAdjacentHTML("beforeBegin","
|
/
|
/
/
" + arr.join('') + "
/
"; } oSelect = gid("O"+id); sel.style.display='none'; // 如果超过8项,下拉框出现滚动条 if(a.length > 8) { oSelect.style.overflowY = 'scroll'; oSelect.style.height = 182; } else { oSelect.style.overflowY = 'hidden'; oSelect.style.height = null; } // 加载原始下拉框的选中项 if(sel.selectedIndex > -1) { setSelectByIndex(id, sel.selectedIndex); } else if(sel.options.length > 0) { setSelectByIndex(id, 0); } } function showHide(id){ HideSel(); blOut = true; nowOpenedSelectBox = id; var sh={block:"none",none:"block"}; if(gid(id).style.display=='') gid(id).style.display='none'; gid(id).style.display=sh[gid(id).style.display]; } function HideSel(event) { if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox)) gid(nowOpenedSelectBox).style.display = 'none'; } function HoverOptions(event) { blOut = true; var obj = event.srcElement ? event.srcElement : event.target; if(obj.tagName=="TD"){ obj.className='option_hover'; } } function OutOptions(event) { blOut = false; var obj = event.srcElement ? event.srcElement : event.target; if(obj.tagName=="TD"){ obj.className='option_out'; } } function ClickOptions(event, id) { var obj = event.srcElement ? event.srcElement : event.target; if(obj.tagName=="TD"){ showHide(obj.parentNode.parentNode.parentNode.parentNode.id); gid('S_'+id).innerHTML=obj.innerHTML; gid('C_'+id).value=obj.value; var sourceObj = gid(id.substr(1)); sourceObj.selectedIndex = obj.parentNode.rowIndex; if (sourceObj.onchange) sourceObj.onchange(); } } // 根据指定索引选中下拉框 function setSelectByIndex(id,index) { if(index <0) index = 0; gid(id).selectedIndex = index; gid('S_O'+id).innerHTML=gid(id).options[index].text; gid('C_O'+id).value=gid(id).value; gid(id).fireEvent('onchange'); } // 根据指定值选中下拉框 function setSelectByValue(id, value) { setSelectByIndex(id, getIndex(id, value)); gid(id).fireEvent('onchange'); } function getIndex(id, value) { var selectBox = gid(id); var aroptions = selectBox.options; var strCompare = new String(value).toLowerCase(); var intCompareLen = strCompare.length; var i, j; for (i = 0; i
':'>','&':'&','"':'"'}; for (i in re) text = text.replace(new RegExp(i,'g'), re[i]); return text; } </script>
| ||||
|
1 <script type="text/javascript">initSelect('Demo_Select');document.body.οnclick=function(){HideSel(event);};</script>
根据索引值调整选中项:
根据value值调整选中项:
这个函数库的主要方法为
initSelect(id, width, height), 后面两个参数主要用于指定下拉框宽度和高度,可以省略。
setSelectByIndex(id, index)
setSelectByValue(id, value)
注1:使用时需要给页面的body增加οnclick="HideSel(event);"以取消下拉框选择。
注2:有些方法是公用方法,请根据实际情况进行调整,比如gid函数。
如何使用:假设你的页面上面放置了DropDownLoad服务器控件或者是select控件,要达到模拟效果只需使用一行代码:
<
script
>
initSelect('Demo_Select');
</
script
>
而想要选中某个值只需要:
onclick
=
"
setSelectByIndex('Demo_Select', gid('ctrIndex').value);
"
或者
onclick
=
"
setSelectByValue('Demo_Select', gid('ctrValue').value);
"
非常的简单!
点击这里下载完整源代码(注:由于演示需要本页面内置的代码可能略有不同。)
演示文件使用了一个图片darrow.gif和一个select.css以及一个select.js文件。
select的核心代码如下:
/**/
/***********************************************************************
** Author: Truly
** Web: http://Truly.cnblogs.com
** LastEdit: 2007.1.16
** Desc: 模拟select控件,实现自定义下拉图片和自定义边框颜色
** initSelect(id,width,height)进行初始化,
** setSelectByIndex(id,index)进行某项的选中
** setSelectByValue(id,value)进行某项的选中
** body 的 οnclick=HideSel(event),οnlοad=initSelect('下拉框select的id'),兼容IE和FireFox
** Note: 注意修改<img src=''>中的下拉图片地址
***********************************************************************/
var imgPath = " https://i-blog.csdnimg.cn/blog_migrate/2e4a663abfe6d0fec491c540f72d9d8a.gif " ;
var blOut = true ;
var nowOpenedSelectBox = null ;
function gid(id) { return document.getElementById?document.getElementById(id):null;}
function initSelect(id, width, height)
{
var sel = gid(id);
var a = sel.options;
var oTable,oTBody, oRow, oCell,oSelect;
if(!gid('O' + id )) {
var strWidth = "";
if(width != null) strWidth=width+"px";
else strWidth = gid(id).offsetWidth + "px";
var strWidth2 = parseInt(strWidth) - 22 + 'px';
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "</td></tr>";
}
// 虽然用insertAdjacentElement可以获得更好的性能,但是由于如果用insertAdjacentElement势必多次使用innerHTML处理,因此就全局来看这里调用1次insertAdjacentElement,反而取得更好的效果。
sel.insertAdjacentHTML("beforeBegin","<table border=0 cellpadding=0 cellspacing=0 width='" + strWidth + "'><tr><td><table width=/"100%/" cellpadding=0 cellspacing=0 border=0 class='sel_normal' οnclick=/"showHide('O" + id + "')/" οnmοuseοut=/"blOut = false;/">/
<tr bgcolor=white>/
<td style='padding-left:3px;padding-right:3px;' nowrap><input type=/"hidden/" name=/"C_O" + id + "/" id=/"C_O" + id + "/"><DIV class='fixedWidth' style='padding-top:3px;width:" + strWidth2 + "' id=/"S_O" + id + "/">下拉选项</DIV></td>/
<td width=/"15/"><img src='" + imgPath + "' /></td>/
</tr>/
</table></td><tr><td><div id=/"O" + id + "/" class=/"select/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
<table cellsapcing=/"0/" cellspadding=/"3/" border=/"0/" width=100%>/
<tbody>" + arr.join('') + "</tbody>/
</table>/
</div></td></tr></tbody></table>");
}
else
{
oSelect = gid('O' + id );
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
}
oSelect.parentNode.innerHTML = "<div id=/"O" + id + "/" style=/"position:absolute;/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
<table cellsapcing=/"0/" cellspadding=/"3/" border=/"0/" width=100%>/
<tbody>" + arr.join('') + "</tbody>/
</table></div>";
}
oSelect = gid("O"+id);
sel.style.display='none';
// 如果超过8项,下拉框出现滚动条
if(a.length > 8)
{
oSelect.style.overflowY = 'scroll';
oSelect.style.height = 182;
}
else
{
oSelect.style.overflowY = 'hidden';
oSelect.style.height = null;
}
// 加载原始下拉框的选中项
if(sel.selectedIndex > -1)
{
setSelectByIndex(id, sel.selectedIndex);
}
else if(sel.options.length > 0)
{
setSelectByIndex(id, 0);
}
}
function showHide(id) {
HideSel();
blOut = true;
nowOpenedSelectBox = id;
var sh={block:"none",none:"block"};
if(gid(id).style.display=='') gid(id).style.display='none';
gid(id).style.display=sh[gid(id).style.display];
}
function HideSel(event)
{
if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox))
gid(nowOpenedSelectBox).style.display = 'none';
}
function HoverOptions(event)
{
blOut = true;
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
obj.className='option_hover';
}
}
function OutOptions(event)
{
blOut = false;
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
obj.className='option_out';
}
}
function ClickOptions(event, id)
{
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
showHide(obj.parentNode.parentNode.parentNode.parentNode.id);
gid('S_'+id).innerHTML=obj.innerHTML;
gid('C_'+id).value=obj.value;
var sourceObj = gid(id.substr(1));
sourceObj.selectedIndex = obj.parentNode.rowIndex;
if (sourceObj.onchange) sourceObj.onchange();
}
}
// 根据指定索引选中下拉框
function setSelectByIndex(id,index)
{
if(index <0) index = 0;
gid(id).selectedIndex = index;
gid('S_O'+id).innerHTML=gid(id).options[index].text;
gid('C_O'+id).value=gid(id).value;
gid(id).fireEvent('onchange');
}
// 根据指定值选中下拉框
function setSelectByValue(id, value) {
setSelectByIndex(id, getIndex(id, value));
gid(id).fireEvent('onchange');
}
function getIndex(id, value)
{
var selectBox = gid(id)
var arOptions = selectBox.options;
var strCompare = new String(value).toLowerCase();
var intCompareLen = strCompare.length;
var i, j;
for (i = 0; i < arOptions.length; i++) {
if (strCompare == arOptions[i].value.substring(0,intCompareLen).toLowerCase()) {
for(j = 0; j < arOptions.length; j++)
;
return i;
break;
}
}
}
// 隐藏和显示某项
function HideItem(id, index)
{
gid("O" + id).childNodes[0].rows[index].style.display = 'none';
}
function ShowItem(id, index)
{
gid("O" + id).childNodes[0].rows[index].style.display = 'block';
}
function HtmlEncode(text)
{
var re = {'<':'<','>':'>','&':'&','"':'"'};
for (i in re) text = text.replace(new RegExp(i,'g'), re[i]);
return text;
}
** Author: Truly
** Web: http://Truly.cnblogs.com
** LastEdit: 2007.1.16
** Desc: 模拟select控件,实现自定义下拉图片和自定义边框颜色
** initSelect(id,width,height)进行初始化,
** setSelectByIndex(id,index)进行某项的选中
** setSelectByValue(id,value)进行某项的选中
** body 的 οnclick=HideSel(event),οnlοad=initSelect('下拉框select的id'),兼容IE和FireFox
** Note: 注意修改<img src=''>中的下拉图片地址
***********************************************************************/
var imgPath = " https://i-blog.csdnimg.cn/blog_migrate/2e4a663abfe6d0fec491c540f72d9d8a.gif " ;
var blOut = true ;
var nowOpenedSelectBox = null ;
function gid(id) { return document.getElementById?document.getElementById(id):null;}
function initSelect(id, width, height)
{
var sel = gid(id);
var a = sel.options;
var oTable,oTBody, oRow, oCell,oSelect;
if(!gid('O' + id )) {
var strWidth = "";
if(width != null) strWidth=width+"px";
else strWidth = gid(id).offsetWidth + "px";
var strWidth2 = parseInt(strWidth) - 22 + 'px';
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "</td></tr>";
}
// 虽然用insertAdjacentElement可以获得更好的性能,但是由于如果用insertAdjacentElement势必多次使用innerHTML处理,因此就全局来看这里调用1次insertAdjacentElement,反而取得更好的效果。
sel.insertAdjacentHTML("beforeBegin","<table border=0 cellpadding=0 cellspacing=0 width='" + strWidth + "'><tr><td><table width=/"100%/" cellpadding=0 cellspacing=0 border=0 class='sel_normal' οnclick=/"showHide('O" + id + "')/" οnmοuseοut=/"blOut = false;/">/
<tr bgcolor=white>/
<td style='padding-left:3px;padding-right:3px;' nowrap><input type=/"hidden/" name=/"C_O" + id + "/" id=/"C_O" + id + "/"><DIV class='fixedWidth' style='padding-top:3px;width:" + strWidth2 + "' id=/"S_O" + id + "/">下拉选项</DIV></td>/
<td width=/"15/"><img src='" + imgPath + "' /></td>/
</tr>/
</table></td><tr><td><div id=/"O" + id + "/" class=/"select/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
<table cellsapcing=/"0/" cellspadding=/"3/" border=/"0/" width=100%>/
<tbody>" + arr.join('') + "</tbody>/
</table>/
</div></td></tr></tbody></table>");
}
else
{
oSelect = gid('O' + id );
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
}
oSelect.parentNode.innerHTML = "<div id=/"O" + id + "/" style=/"position:absolute;/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
<table cellsapcing=/"0/" cellspadding=/"3/" border=/"0/" width=100%>/
<tbody>" + arr.join('') + "</tbody>/
</table></div>";
}
oSelect = gid("O"+id);
sel.style.display='none';
// 如果超过8项,下拉框出现滚动条
if(a.length > 8)
{
oSelect.style.overflowY = 'scroll';
oSelect.style.height = 182;
}
else
{
oSelect.style.overflowY = 'hidden';
oSelect.style.height = null;
}
// 加载原始下拉框的选中项
if(sel.selectedIndex > -1)
{
setSelectByIndex(id, sel.selectedIndex);
}
else if(sel.options.length > 0)
{
setSelectByIndex(id, 0);
}
}
function showHide(id) {
HideSel();
blOut = true;
nowOpenedSelectBox = id;
var sh={block:"none",none:"block"};
if(gid(id).style.display=='') gid(id).style.display='none';
gid(id).style.display=sh[gid(id).style.display];
}
function HideSel(event)
{
if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox))
gid(nowOpenedSelectBox).style.display = 'none';
}
function HoverOptions(event)
{
blOut = true;
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
obj.className='option_hover';
}
}
function OutOptions(event)
{
blOut = false;
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
obj.className='option_out';
}
}
function ClickOptions(event, id)
{
var obj = event.srcElement ? event.srcElement : event.target;
if(obj.tagName=="TD"){
showHide(obj.parentNode.parentNode.parentNode.parentNode.id);
gid('S_'+id).innerHTML=obj.innerHTML;
gid('C_'+id).value=obj.value;
var sourceObj = gid(id.substr(1));
sourceObj.selectedIndex = obj.parentNode.rowIndex;
if (sourceObj.onchange) sourceObj.onchange();
}
}
// 根据指定索引选中下拉框
function setSelectByIndex(id,index)
{
if(index <0) index = 0;
gid(id).selectedIndex = index;
gid('S_O'+id).innerHTML=gid(id).options[index].text;
gid('C_O'+id).value=gid(id).value;
gid(id).fireEvent('onchange');
}
// 根据指定值选中下拉框
function setSelectByValue(id, value) {
setSelectByIndex(id, getIndex(id, value));
gid(id).fireEvent('onchange');
}
function getIndex(id, value)
{
var selectBox = gid(id)
var arOptions = selectBox.options;
var strCompare = new String(value).toLowerCase();
var intCompareLen = strCompare.length;
var i, j;
for (i = 0; i < arOptions.length; i++) {
if (strCompare == arOptions[i].value.substring(0,intCompareLen).toLowerCase()) {
for(j = 0; j < arOptions.length; j++)
;
return i;
break;
}
}
}
// 隐藏和显示某项
function HideItem(id, index)
{
gid("O" + id).childNodes[0].rows[index].style.display = 'none';
}
function ShowItem(id, index)
{
gid("O" + id).childNodes[0].rows[index].style.display = 'block';
}
function HtmlEncode(text)
{
var re = {'<':'<','>':'>','&':'&','"':'"'};
for (i in re) text = text.replace(new RegExp(i,'g'), re[i]);
return text;
}