Home » Javascript » Return table with ajax based on select dropdown selection

Return table with ajax based on select dropdown selection

Posted by: admin August 19, 2018 Leave a comment


I have a chosen- select html dropdown list of users. I want to select a user from that select list and return a table of all Assets(computers) associated with that particular user. I have the table and Dropdownlist binded to a SQL database that is populated by a stored procedure call in the code behind.

I have code to filter a table based on the selector, but I’m wanting to generate a new grid (Post) based on every selection. I’m in search of some ajax code to accomplish this task. The function below (displaygrid) only filters based on selection, I want to generate new table based selection for different users.

I’m fairly new to Javascript/ajax so any help is greatly appreciated. Thanks in advance!

Script code :

    $(document).ready(function () {
    $(".chzn-select").chosen().change(function () {  

 function displaygrid() {

    $('#ddlUser').change(function () {
        var selection = $(this).val();
        $('tblEquipment')[selection ? 'show' : 'hide']();
        if (selection) {  // iterate only if `selection` is not empty
            $.each($('#tblEquipment tbody tr'), function (index, item) {
                $(item)[$(item).is(':contains(' + selection + ')') ? 
                    'show' : 'hide']();


HTML code:

<select id="ddlUser" runat="server" datavaluefield="UserID" datatextfield="FullName" class="chzn-select" style="width: 350px;" tabindex="2">

 <table id="tblEquipment" class="tablesorter">
                    <th style="display: none"></th>
                    <th>StartDate Size</th>
            <asp:Repeater ID="rptEquipment" runat="server" EnableViewState="false">
                        <td class="mmid" style="display: none"><%# Eval("AssetID") %></td>
                        <td><%# Eval("AssetTagNumber") %></td>
                        <td><%# Eval("ManufacturerName") %></td>
                        <td><%# Eval("TypeName") %></td>
                        <td><%# Eval("AssetName") %></td>
                        <td><%# Eval("Receptiondate") %></td>
                        <td><%# Eval("StartDate") %></td>
                        <td><%# Eval("Active") %></td>