onchange display GridView record if exist from database using Javascript

Question

I have an onchange event from html DropDownList in my code. I have already created a function to handle the OnChange event.

What I am trying to achieve is to load a GridView based on the DropDownList selection.

Below is my HTML:

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

Also see my JavaScript for the same:

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;
}

How can I achieve this task using JavaScript? kindly suggest

Answer 1

Here is an approach with jQuery (don't forget to remove runat='server' from select):

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>