关于下拉框内容过多如何解决

最新推荐文章于 2024-06-04 15:18:23 发布

原创最新推荐文章于 2024-06-04 15:18:23 发布 · 1.3w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#function #农业 #button #input #iframe #table

本文介绍了一种解决下拉框选项过多问题的方法，通过使用iframe弹窗展示大量选项，改善用户体验。此方案适用于需要从众多选项中选择的情况，如行业分类等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于下拉框内容过多如何解决

做项目的时候经常遇到下拉框中需要选择的内容过多的情况，有时候多到上千项内容，
选择起来非常不方便
找个好的方法是将下拉框中的内容放到一个iframe中，利用弹出方式来获得选择内容
代码非常简单，但是显示的效果确很明显
index.htm代码如下：

<html>

<head>

<style>

body{font-size:9pt}

</style>

function ShowOpenWin(objTag)

{

document.getElementById("frmOpenWin").style.display = "block";

var position = getPos(objTag);

document.getElementById("frmOpenWin").style.top = (position.y+22) + "px";

document.getElementById("frmOpenWin").style.left = position.x+"px";

}

function HiddenAllFlag()

{

if(event.srcElement.id != "tbxCategory")

{

document.getElementById("frmOpenWin").style.display = "none";

}

function getPos(elm)

{

for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);

return {x:zx,y:zy}

}

</script>

</head>

旧的行业选择：<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>

</select>

<br>

新的行业选择：<input type="text" id="tbxCategory" onclick="ShowOpenWin(this);" style="width:250"/>

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>

<style>

body{font-size:9pt}

td{font-size:9pt}

</style>

var oldBackGroundColor = "";

var bClick = false;

function onclickRow(objid,objName)

{

window.parent.document.getElementById("tbxCategory").value = objName+"["+objid+"]";

window.parent.window.document.getElementById("frmOpenWin").style.display = "none";

}

function tr_onmouseover(event)

{

bClick = true;

var objTR = null;

if(event == null)

{

event = window.event; // For IE

}

var objTag = event.srcElement? event.srcElement : event.target;//For FierFox

if(objTag.tagName == "TD")

{

if(document.all)

{

if(objTag.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.style.backgroundColor = "#99ff00";

}

else if(objTag.parentNode.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";

}

else

{

if(objTag.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.style.backgroundColor = "#99ff00";

}

else if(objTag.parentNode.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";

}

else

{

if(objTag.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.style.backgroundColor="#99ff00";

}

else if(objTag.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.style.backgroundColor="#99ff00";

}

else if(objTag.parentNode.parentNode.tagName == "TR")

{

oldBackGroundColor = objTag.parentNode.style.backgroundColor;

objTag.parentNode.parentNode.style.backgroundColor="#99ff00";

}

function tr_onmouseout(event)

{

var objTR = null;

if(event == null)

{

event = window.event; // For IE

}

var objTag = event.srcElement? event.srcElement : event.target;//For FierFox

if(objTag.tagName == "TD")

{

if(objTag.parentNode.tagName == "TR" && bClick)

{

objTag.parentNode.style.backgroundColor = oldBackGroundColor;

oldBackGroundColor = "";

}

else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)

{

objTag.parentNode.parentNode.style.backgroundColor = oldBackGroundColor;

oldBackGroundColor = "";

}

else

{

if(objTag.tagName == "TR" && bClick)

{

objTag.style.backgroundColor = oldBackGroundColor;

oldBackGroundColor = "";

}

else if(objTag.parentNode.tagName == "TR" && bClick)

{

objTag.parentNode.style.backgroundColor=oldBackGroundColor;

oldBackGroundColor = "";

}

else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)

{

objTag.parentNode.parentNode.style.backgroundColor=oldBackGroundColor;

oldBackGroundColor = "";

}

bClick = false;

}

function InitRowBackColor(objTable)

{

for(var i = 0; i < objTable.rows.length; i ++)

{

if(document.all)

{

objTable.rows[i].style.backgroundColor = "";

}

else

{

objTable.rows[i].style.backgroundColor = "";

}

</script>

</head>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC"

bgcolor="#999999" ID="Table4">

<tr>

</tr>

<tr>

<table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bordercolor="#006699"

name="tbData" id="tbData">

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('001','农业');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('002','谷物及其他作物的种植');"

onmouseover="tr_onmouseover()" onmouseout="tr_onmouseout()">

<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">谷物的种植</TD>

<TD>谷物的种植说明</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('004','薯类的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<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">油料的种植</TD>

<TD>油料的种植说明</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('006','豆类的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<TD align="center">豆类的种植</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('007','棉花的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<TD align="center">棉花的种植</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('008','麻类的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<TD align="center">麻类的种植</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('009','糖料的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<TD align="center">糖料的种植</TD>

</tr>

<tr style="cursor:hand" bgcolor="#E9F3FE" onclick="onclickRow('010','烟草的种植');" onmouseover="tr_onmouseover()"

onmouseout="tr_onmouseout()">

<TD align="center">烟草的种植</TD>

</tr>

</table>

共500行,50页

</SELECT>条记录 <A style="color:blue">下一页</A> <A style="color:blue">最后页</A> 转到<INPUT style="width:36px" value="1" name="page" ID="Text1">页

</div>

</td>

</tr>

</table>

</body>

</html>

预览效果如下：

另：从树中选择数据或其他大量数据中选择数据也可适用该方法