javascript - onchange 显示 GridView 记录(如果使用 Javascript 从数据库中存在)

Question

我的代码中有一个来自 html DropDownList 的 onchange 事件。我已经创建了一个函数来处理 OnChange 事件。

我想要实现的是根据 DropDownList 选择加载一个 GridView。

下面是我的HTML:

<select id="ddlUnit" style="width: auto" runat="server" name="unitno" onchange="Funchangestatus()">
    <option>--- Select ---</option>
</select>

另请参阅我的 JavaScript:

function Funchangestatus() {
        PageMethods.GetStatus(document.getElementById('ddlUnit').value, onstatuschange);
}
function onstatuschange(status) {
        var strvalstatus = "";
        strstatus = status[0].split('~');
        document.getElementById("txtstatus").value = strstatus[0];
        document.getElementById("txtstatus").readOnly = true;
}

如何使用 JavaScript 完成此任务？请建议

Answer 1

这是一个使用 jQuery 的方法(不要忘记从 select 中删除 runat='server'):

HTML:

<select id="ddlUnit" style="width: auto" name="unitno">
    <option>--- Select ---</option>
    <option>option1</option>
</select>
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<asp:Label ID="lblMessage" runat="server" Text="No Record Found" Font-Bold="true" ForeColor="Red" style="display:none"></asp:Label>

jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=btnSearch.ClientID %>').click(function (e) {
            SearchGridData();
            e.preventDefault();
        });
    });
    function SearchGridData() {
        var counter = 0;
        //Get the search text
        var searchText = $('#ddlUnit').val().toLowerCase();
        //Hide No record found message
        $('#<%=lblMessage.ClientID %>').hide();
        //Hide all the rows of gridview
        $('#<%=GridView1.ClientID %> tr:has(td)').hide();
        if (searchText.length > 0) {
            //Iterate all the td of all rows
            $('#<%=GridView1.ClientID %> tr:has(td)').children()
       .each(function () {
         var cellTextValue = $(this).text().toLowerCase();
          //Check that text is matches or not
         if (cellTextValue.indexOf(searchText) >= 0) {
         $(this).parent().show();
         counter++;
      }
       });
            if (counter == 0) {
                //Show No record found message
                $('#<%=lblMessage.ClientID %>').show();
            }
        }
        else {
            //Show All the rows of gridview
            $('#<%=GridView1.ClientID %> tr:has(td)').show();
        }
    }
</script>