JS实现DropDownList的通用查询中庸

前阵子同事帮忙写了一个通用查询(JS实现DropDownList),今天有空了看了下代码,挺简单,但挺实用.现分享如下.

一.效果如下：

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 />
        &nbsp;<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;
            }
        }
    }
}

JS实现DropDownList的通用查询 中庸

JS实现DropDownList的通用查询中庸