Populate select list that was dynamically added using jquery

Question

I dynamically add a table to the page using jquery, this table contains 5 dropdowns. I'm trying to populate the values of one of the dropdowns on the row that has been dynamically added, however, I'm unable to achieve it.

This is my table, I've removed the un-necessary fields to keep things simple:

<table class="table" id="1" order-month="2021-05-01T00:00:00">
            <thead>
                <tr>
                    <th scope="col">
                        <select class="form-select form-control mb-2 mr-sm-2" id="ItemList">
                            <option selected="">Select Item</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col">Day Part</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select class="form-select form-control mb-2 mr-sm-2" id="ClassificationList">
                            <option selected="">Select Classification</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select form-control mb-2 mr-sm-2" id="DayValueList">
                            <option selected="">Select Day Value</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

This table is added dynamically via jquery when a button is pressed on the screen, when I choose an Item from ItemList select list an ajax method is called, which in turn retrieves the classifications from the server. I then try to populate the ClassificationList select list as shown:

 $.ajax({
          type: 'POST',
          data: formData,
          url: '@Url.Page("product", "getitemclassifications")',
          success: function (result) {
             console.log(result);

             var $dropdown = $("$('table[id=1] > tbody > tr > td > select#ClassificationList')");
             $.each(result.classifications, function () {
                  $dropdown.append($("<option />").val(this.id).text(this.name));
             });

           },
            error: function (result) { }
     });

I've hardcoded the Id of the table in the ajax method just for testing purposes.

However, I get the following error:

Syntax error, unrecognized expression: $('table[id=1] > tbody > tr > td > select#ClassificationList')

Can anyone point me in the right direction into how you go about targeting a select list which has been dynamically added and then populating it with the given values?

There is a table already on the page which is the skeleton table (hidden from user sight) that we clone when adding a new table to the page. When I try what you have suggested it populates the dropdown on the skeleton table, not the newly added table, so I need to way to explicitly target the select list on the dynamically added table. — Code Ratchet
– Code Ratchet, Commented May 15, 2021 at 6:52

Swati · Accepted Answer · 2021-05-15 06:58:31Z

You need to use class instead of ids because as you said there already elements with same ids so it will target them if you use id .Then , on change of your item select-box use $(this).closest("table") to get closest table from select-box then use .find() to change required select-box inside table .

Demo Code :

//on change of item
$(document).on("change", ".ItemList", function() {
  var selector = $(this).closest("table"); //get closest table
  /*$.ajax({
     type: 'POST',
     data: "",
     url: '@Url.Page("product", "getitemclassifications")',
     success: function(result) {
       console.log(result);*/
  //use .find to get slect-box
  var $dropdown = selector.find("select.ClassificationList");
  //$.each(result.classifications, function() {
  $dropdown.append($("<option />").val(1).text("abc"));
  //});

  /* },
    error: function(result) {}
  });*/
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table class="table" id="1" order-month="2021-05-01T00:00:00">
  <thead>
    <tr>
      <th scope="col">
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 ItemList">
          <option selected="">Select Item</option>
          <option value="1">1</option>
        </select>
      </th>
    </tr>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Day Part</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 ClassificationList">
          <option selected="">Select Classification</option>
        </select>
      </td>
      <td>
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 DayValueList">
          <option selected="">Select Day Value</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Thallius · Accepted Answer · 2021-05-15 06:58:01Z

1

Give the selects a different dummy class like

<select class = "form-select form-control mb-2 mr-am-2 itemlist“>

You can get it using find

$(’#1’).find(’.itemlist’).append();

answered May 15, 2021 at 6:58

Thallius

2,6132 gold badges19 silver badges41 bronze badges

Collectives™ on Stack Overflow

Populate select list that was dynamically added using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related