前阵子同事帮忙写了一个通用查询(JS实现DropDownList),今天有空了看了下代码,挺简单,但挺实用.现分享如下.
一.效果如下：
1.
2.点测试按钮后进入查询页面
3.输入"上海" 点查询 看到如下界面
4.选取"上海机场集团公司" 双击 看到最终效果
二.代码
查询前台代码：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DdlSelect.aspx.cs" Inherits="Control_DdlSelect" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
#Text1
{
height: 209px;
407px;
}
#Select1
{
362px;
height: 261px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" value="" id="input_1"/>
<input type="button" value="查找" onclick="query();" />
<br />
<select id="Select1" name="D1" size=20 ondblclick="selectitem(this.value);">
<option></option>
</select></div>
</form>
</body>
<script type="text/javascript">
var l_parm = window.dialogArguments;
if(l_parm != null && l_parm.length > 0)
{
var l_d = document.getElementById("Select1");
var j = l_d.length;
for(var i = j-1; i >=0 ; i --)
{
l_d.remove(i);
}
for(var i = 0 ;i < l_parm.length; i ++)
{
var newoption = document.createElement("OPTION");
newoption.text=l_parm[i][0];
newoption.value=l_parm[i][1];
l_d.add(newoption);
}
}
function query()
{
var l_filter = document.getElementById("input_1").value;
var l_d = document.getElementById("Select1");
var j = l_d.length;
for(var i = j-1; i >=0 ; i --)
{
l_d.remove(i);
}
for(var i = 0 ;i < l_parm.length; i ++)
{
if(l_filter == "" || l_parm[i][0].indexOf(l_filter) >= 0)
{
var newoption = document.createElement("OPTION");
newoption.text=l_parm[i][0];
newoption.value=l_parm[i][1];
l_d.add(newoption);
}
}
}
function selectitem(val)
{
window.returnValue= val;
window.close();
}
</script>
</html>
查询后台代码：无代码
调用代码：
1. <input type="button" value="测试" onclick="f_queryddl('目标DropDownList的ID')"/>
2.其对应JS代码如下
View Code
function f_queryddl(ddlid)
{
var l_ddl = document.getElementById(ddlid);
var l_parm;
if(l_ddl== null || l_ddl.options.length ==0)
{
return;
}
l_parm = new Array(l_ddl.options.length);
for(var i =0; i < l_ddl.options.length; i ++)
{
l_parm[i]=new Array(2);
l_parm[i][0] = l_ddl.options[i].text;
l_parm[i][1] = l_ddl.options[i].value;
}
var l_ret = window.showModalDialog("/Web/Control/DdlSelect.aspx",l_parm);
if(l_ret != null && l_ret.length > 0)
{
for(var i =0; i < l_ddl.options.length; i ++)
{
if(l_ddl.options[i].value == l_ret)
{
l_ddl.options.selectedIndex = i;
return;
}
}
}
}