根据输入内容自动筛选数据--基于option操作

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<XXXX.XXX.Data.TM_TAB_USER>>" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>选择人员</title>
    <link href="../../css/css.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.5.1.js" charset="gb2312"></script>
    <script language="javascript" type="text/javascript">
        function btnsubmits() {
            var userAccount = document.getElementById("userAccount").value;
            if (userAccount != "") {
                window.returnValue = userAccount;
                window.close();
            } else {
                alert("请选择用户");
            }
        }
        function searchUser() {
            var len = document.getElementById("userAccount").options.length
            var condition = document.getElementById("searchText").value;
            var hdLen = document.getElementById("hdLen").value;
            var hideArr = new Array;
            var allArr = new Array;

            if (len < hdLen) {
                len = hdLen;
            }
            else {
                document.getElementById("hdLen").value = len;
            }

            for (var i = 0; i < len; i++) {
                allArr.push(i);
            }

            arrHandle($('select'), allArr, 'show');

            len = document.getElementById("userAccount").options.length;

            for (var i = 0; i < len; i++) {
                var temStr = document.getElementById("userAccount").options[i].text;
                if (temStr.indexOf(condition) != -1) {
                } else {
                    hideArr.push(i);
                }
            }
            arrHandle($('select'), hideArr, 'hide');

        }

        function arrHandle(obj, arr, type) {
            if ($.isArray(arr)) {
                var len = arr.length;
                for (i = 0; i < len; i++) {
                    var optionNow = obj.find("option").eq(arr[i]);
                    var optionP = optionNow.parent("span");
                    if (type == "show") {
                        if (optionP.size()) {
                            optionP.children().clone().replaceAll(optionP);
                        }
                    }
                    else {
                        if (!optionP.size()) {
                            optionNow.wrap("<span style='display:none'></span>");
                        }
                    }
                }
            }
        }

    </script>
</head>
<body bgcolor="#F2F9FD">
    <div align="center" bgcolor="#F2F9FD">
        <form>
        <input type="hidden" value="0" id="hdLen" />
        <table>
            <tr>
                <td>
                    <h4 style="color: Blue; font-size: 19px">
                        双击选择用户</h4>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="searchText"  onkeyup="javascript:searchUser()"   style="width: 300px;" />
                </td>
            </tr>
            <tr>
                <td>
                    <select id="userAccount" name="userAccount" ondblclick="javascript:btnsubmits()"
                        multiple="true" style="width: 300px; height: 300px">
                        <% foreach (var item in Model)
                           { %>
                        <option value="<%=item.USER_ACCOUNT%>" id="id">
                            <%=item.USER_ACCOUNT%>/<%=item.USER_NAME %></option>
                        <% } %>
                    </select>
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>
</html>

  

posted @ 2014-03-28 15:35  devin2  阅读(496)  评论(0编辑  收藏  举报