how to append option into the select tag inside table

Question

User-1634604574 posted

i have this table number of rows increased dynamically i want to append option into the select tag inside table  i wrote this but is not working

<table id="tb" class="authors-list4">
</table>

<script>

 jQuery('.add_row4').click(function (event) {
            event.preventDefault();

 var newRow = jQuery(
 '<tr>'
 + '<td><input type="text" id="sj"></td>'
 + '<td><input type="select" class="uom" id="s"></select></td>'
              
               + '</tr>');

            jQuery('table.authors-list4').append(newRow);


  $.get("/AutoComplete/Get_UOM", {
        }, function (data) {
            
            var row;
            $.each(data, function (i, v) {
                row += "<option>" + v.UOM + "</option>";
            });

            
            $(".uom").append(row);
        });

</script>

Answer 1

User1724605321 posted

Hi  zhyanadil.it ,

The first step is to debug your client side and server side , confirm that  you get the correct  `data` returned from "Get_UOM" function .

Another point is to use 

<td><select class="uom" id="s"></select></td>

Instead of :

<td><input type="select" class="uom" id="s"></select></td>

Best Regards,

Nan Yu

Answer 2

User-474980206 posted

$.append only works on the first match. try:

$('.add_row4').click(function (event) {
    event.preventDefault();

    // note: the id's in this fragement are invalid as they should be unique
    // better to leave them out
    // also the form elements do not have names, so they will not post
    var $newRow = $(
       '<tr>'
       + ' <td><input type="text" id="sj"></td>'
       + ' <td><select class="uom" id="s"></select></td>'
       + '</tr>'
    );
    $('table.authors-list4').append($newRow);

    var $select = $newRow.find("select");
    $.get("/AutoComplete/Get_UOM", function(data) {
        $.each(data, function(i, v) {
            $select.append("<option>" + v.UOM + "</option>");
        });
    });
});

Answer 3

User-2054057000 posted

I recreated your whole scenario which adds number of rows dynamically to the table and also appends option into the select tag inside table.

See the below Video which shows the working:

The appending of the rows to the html table is done on the click of the button (See the below code). I have use jQuery Append method to do this task:

The Code:

The full code is:

<table id="tb" class="authors-list4"></table>
<button id="arrange" class="add_row4">Arrange</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add_row4").click(function (e) {
            var $newRow = $(
                '<tr>'
                + ' <td><input type="text" id="sj"></td>'
                + ' <td><select class="uom" id="s"></select></td>'
                + '</tr>'
            );
            $('table.authors-list4').append($newRow);

            var $select = $newRow.find("select");
            $.get("items.json", function (data) {
                $.each(data, function (i, v) {
                    $select.append("<option>" + v.UOM + "</option>");
                });
            });
        });

    });
</script>

Explanation: I have used jQuery GET Method to make an AJAX call to a JSON file called items.json. The json file's contents are use to fill the options of the select html tag. This file is shown below:

[
    {
        "UOM": "Option 1"
    },
    {
        "UOM": "Option 2"
    },
    {
        "UOM": "Option 3"
    },
    {
        "UOM": "Option 4"
    },
    {
        "UOM": "Option 5"
    }
]

I hope you will find my answer useful. 

Thanks & Regards.....