關於下拉框內容過多如何解決

做項目的時候經常遇到下拉框中需要選擇的內容過多的情況，有時候多到上千項內容，
選擇起來非常不方便
找個好的方法是將下拉框中的內容放到一個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>

預覽效果如下：

另：從樹中選擇數據或其他大量數據中選擇數據也可適用該方法

關於下拉框內容過多如何解決

監測數據採集物聯網應用解決方案

java編寫簡單實用的類似tomcat的web應用服務器

通用數據接口管理系統CDI介紹

關於下拉框內容過多如何解決

ASP.NET中鍵盤上下左右鍵控制DataGrid的項選擇和分頁

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結