关于下拉框内容过多如何解决
做项目的时候经常遇到下拉框中需要选择的内容过多的情况,有时候多到上千项内容,
选择起来非常不方便
找个好的方法是将下拉框中的内容放到一个iframe中,利用弹出方式来获得选择内容
代码非常简单,但是显示的效果确很明显
index.htm代码如下:
<
html
>
<
head
>
<
title
></
title
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
style
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
body{...}{font-size:9pt}
</
style
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="javascript"
>
...
function ShowOpenWin(objTag)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.getElementById("frmOpenWin").style.display = "block";
var position = getPos(objTag);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
document.getElementById("frmOpenWin").style.top = (position.y+22) + "px";
document.getElementById("frmOpenWin").style.left = position.x+"px";
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
function HiddenAllFlag()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(event.srcElement.id != "tbxCategory")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.getElementById("frmOpenWin").style.display = "none";
}
}
function getPos(elm)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
return ...{x:zx,y:zy}
}
</
script
>
</
head
>
<
body
onclick
="HiddenAllFlag()"
>
旧的行业选择:
<
select
ID
="Select1"
NAME
="Select1"
style
="width:250"
>
<
option
>
农业
</
option
>
<
option
>
谷物及其他作物的种植
</
option
>
<
option
>
谷物的种植
</
option
>
<
option
>
薯类的种植
</
option
>
<
option
>
油料的种植
</
option
>
<
option
>
豆类的种植
</
option
>
<
option
>
棉花的种植
</
option
>
<
option
>
麻类的种植
</
option
>
<
option
>
糖料的种植
</
option
>
<
option
>
烟草的种植
</
option
>
<
option
>
其他作物的种植
</
option
>
<
option
>
蔬菜、园艺作物的种植
</
option
>
<
option
>
蔬菜的种植
</
option
>
<
option
>
花卉的种植
</
option
>
<
option
>
其他园艺作物的种植
</
option
>
<
option
>
水果、坚果、饮料和香料作物的种植
</
option
>
<
option
>
水果、坚果的种植
</
option
>
<
option
>
茶及其他饮料作物的种植
</
option
>
<
option
>
香料作物的种植
</
option
>
<
option
>
中药材的种植
</
option
>
<
option
>
林业
</
option
>
<
option
>
林木的培育和种植
</
option
>
<
option
>
育种和育苗
</
option
>
<
option
>
造林
</
option
>
<
option
>
林木的抚育和管理
</
option
>
<
option
>
木材和竹材的采运
</
option
>
<
option
>
木材的采运
</
option
>
<
option
>
竹材的采运
</
option
>
<
option
>
林产品的采集
</
option
>
<
option
>
畜牧业
</
option
>
<
option
>
牲畜的饲养
</
option
>
<
option
>
猪的饲养
</
option
>
<
option
>
家禽的饲养
</
option
>
<
option
>
狩猎和捕捉动物
</
option
>
<
option
>
其他畜牧业
</
option
>
<
option
>
渔业
</
option
>
<
option
>
海洋渔业
</
option
>
<
option
>
海水养殖
</
option
>
<
option
>
海洋捕捞
</
option
>
<
option
>
内陆渔业
</
option
>
<
option
>
内陆养殖
</
option
>
<
option
>
内陆捕捞
</
option
>
<
option
>
农、林、牧、渔服务业
</
option
>
<
option
>
农业服务业
</
option
>
<
option
>
灌溉服务
</
option
>
<
option
>
农产品初加工服务
</
option
>
<
option
>
其他农业服务
</
option
>
<
option
>
林业服务业
</
option
>
<
option
>
畜牧服务业
</
option
>
<
option
>
兽医服务
</
option
>
<
option
>
其他畜牧服务
</
option
>
<
option
>
国际组织
</
option
>
<
option
>
村民自治组织
</
option
>
<
option
>
社区自治组织
</
option
>
<
option
>
基层群众自治组织
</
option
>
<
option
>
宗教组织
</
option
>
<
option
>
其他社会团体
</
option
>
<
option
>
行业性团体
</
option
>
<
option
>
专业性团体
</
option
>
<
option
>
农、林、牧、渔业
</
option
>
</
select
>
<
br
>
新的行业选择:
<
input
type
="text"
id
="tbxCategory"
onclick
="ShowOpenWin(this);"
style
="width:250"
/>
<
iframe
onlosecapture
="HiddenAllFlag()"
onblur
="HiddenAllFlag()"
src
="sel.htm"
id
="frmOpenWin"
frameborder
="0"
style
="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: none; BORDER-LEFT: 1px solid; WIDTH: 400px; BORDER-BOTTOM: 1px solid; POSITION: absolute; HEIGHT: 350px"
></
iframe
>
</
body
>
</
html
>
sel.htm代码如下:
<
html
>
<
head
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
style
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
body{...}{font-size:9pt}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
td{...}{font-size:9pt}
</
style
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="javascript"
>
...
var oldBackGroundColor = "";
var bClick = false;
function onclickRow(objid,objName)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
window.parent.document.getElementById("tbxCategory").value = objName+"["+objid+"]";
window.parent.window.document.getElementById("frmOpenWin").style.display = "none";
}
function tr_onmouseover(event)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
bClick = true;
var objTR = null;
if(event == null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
event = window.event; // For IE
}
var objTag = event.srcElement? event.srcElement : event.target;//For FierFox
if(objTag.tagName == "TD")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(document.all)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(objTag.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.style.backgroundColor = "#99ff00";
}
else if(objTag.parentNode.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";
}
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(objTag.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.style.backgroundColor = "#99ff00";
}
else if(objTag.parentNode.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";
}
}
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(objTag.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.style.backgroundColor="#99ff00";
}
else if(objTag.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.style.backgroundColor="#99ff00";
}
else if(objTag.parentNode.parentNode.tagName == "TR")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
oldBackGroundColor = objTag.parentNode.style.backgroundColor;
objTag.parentNode.parentNode.style.backgroundColor="#99ff00";
}
}
}
function tr_onmouseout(event)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var objTR = null;
if(event == null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
event = window.event; // For IE
}
var objTag = event.srcElement? event.srcElement : event.target;//For FierFox
if(objTag.tagName == "TD")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(objTag.parentNode.tagName == "TR" && bClick)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTag.parentNode.style.backgroundColor = oldBackGroundColor;
oldBackGroundColor = "";
}
else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTag.parentNode.parentNode.style.backgroundColor = oldBackGroundColor;
oldBackGroundColor = "";
}
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(objTag.tagName == "TR" && bClick)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTag.style.backgroundColor = oldBackGroundColor;
oldBackGroundColor = "";
}
else if(objTag.parentNode.tagName == "TR" && bClick)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTag.parentNode.style.backgroundColor=oldBackGroundColor;
oldBackGroundColor = "";
}
else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTag.parentNode.parentNode.style.backgroundColor=oldBackGroundColor;
oldBackGroundColor = "";
}
}
bClick = false;
}
function InitRowBackColor(objTable)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
for(var i = 0; i < objTable.rows.length; i ++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(document.all)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTable.rows[i].style.backgroundColor = "";
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objTable.rows[i].style.backgroundColor = "";
}
}
}
</
script
>
</
head
>
<
body
MS_POSITIONING
="GridLayout"
leftmargin
="0"
topmargin
="0"
>
<
table
width
="100%"
border
="0"
align
="center"
cellpadding
="0"
cellspacing
="1"
bordercolor
="#CCCCCC"
bgcolor
="#999999"
ID
="Table4"
>
<
tr
>
<
td
bgcolor
="#FFFFFF"
>
行业名称:
<
input
type
="text"
id
="tbxname"
><
input
type
="button"
id
="btnOk"
value
="查询"
></
td
>
</
tr
>
<
tr
>
<
td
height
="58"
bgcolor
="#FFFFFF"
>
<
table
width
="99%"
border
="0"
align
="center"
cellpadding
="0"
cellspacing
="1"
bordercolor
="#006699"
name
="tbData"
id
="tbData"
>
<
tr
bgcolor
="#A9D0FC"
>
<
td
align
="center"
height
="25px"
><
b
>
行业ID
</
b
></
td
>
<
td
align
="center"
><
B
>
行业名称
</
B
></
td
>
<
td
align
="center"
><
b
>
行业说明
</
b
></
td
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('001','农业');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25"
>
001
</
TD
>
<
TD
align
="center"
>
农业
</
TD
>
<
TD
>
农业说明
</
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('002','谷物及其他作物的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
002
</
TD
>
<
TD
align
="center"
>
谷物及其他作物的种植
</
TD
>
<
TD
>
谷物及其他作物的种植说明
</
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('003','谷物的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
003
</
TD
>
<
TD
align
="center"
>
谷物的种植
</
TD
>
<
TD
>
谷物的种植说明
</
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('004','薯类的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
004
</
TD
>
<
TD
align
="center"
>
薯类的种植
</
TD
>
<
TD
>
薯类的种植说明
</
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('005','油料的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
005
</
TD
>
<
TD
align
="center"
>
油料的种植
</
TD
>
<
TD
>
油料的种植说明
</
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('006','豆类的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
006
</
TD
>
<
TD
align
="center"
>
豆类的种植
</
TD
>
<
TD
></
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('007','棉花的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
007
</
TD
>
<
TD
align
="center"
>
棉花的种植
</
TD
>
<
TD
></
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('008','麻类的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
008
</
TD
>
<
TD
align
="center"
>
麻类的种植
</
TD
>
<
TD
></
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('009','糖料的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
009
</
TD
>
<
TD
align
="center"
>
糖料的种植
</
TD
>
<
TD
></
TD
>
</
tr
>
<
tr
style
="cursor:hand"
bgcolor
="#E9F3FE"
onclick
="onclickRow('010','烟草的种植');"
onmouseover
="tr_onmouseover()"
onmouseout
="tr_onmouseout()"
>
<
TD
align
="center"
height
="25px"
>
010
</
TD
>
<
TD
align
="center"
>
烟草的种植
</
TD
>
<
TD
></
TD
>
</
tr
>
</
table
>
<
div
style
="text-align:right"
>
共500行,50页
<
SELECT
name
="page_size"
ID
="Select2"
>
<
OPTION
value
="10"
selected
>
10
</
OPTION
>
<
OPTION
value
="20"
>
20
</
OPTION
>
<
OPTION
value
="30"
>
30
</
OPTION
>
<
OPTION
value
="50"
>
50
</
OPTION
>
<
OPTION
value
="100"
>
100
</
OPTION
>
</
SELECT
>
条记录
<
A
style
="color:blue"
>
下一页
</
A
>
<
A
style
="color:blue"
>
最后页
</
A
>
转到
<
INPUT
style
="width:36px"
value
="1"
name
="page"
ID
="Text1"
>
页
<
INPUT
class
="btn"
type
="button"
value
="go"
ID
="Button1"
NAME
="Button1"
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
预览效果如下:
另:从树中选择数据或其他大量数据中选择数据也可适用该方法
![](https://p-blog.csdn.net/images/p_blog_csdn_net/yong427/12.GIF)