Appending and Selecting option in dropdown from an Array in loop in Jquery

Question

Basically, I have one dropdown in my table. Upon passing a string , I would like to append new rows to the table. After appending new rows to the table, I want to select the option in dropdown on every iteration.

Jquery code:

    array1=['A1','B1','C1'];
    for (i=0;i<array1.length;i++) 
    {
    let newrow = $("<tr>")
    let newcol = $("<td>" +
    "<select class='testdrp'>" + 
    "<option value='1' >AAAA</option>" +
    "<option value='2' >BBBB</option>"+
    "<option value='3' >CCCC</option> </select></td></tr>");
    newrow.append(newcol);
    $("tbody.tablename").append(newrow);

#condition to select option from the dropdown    
            if(array1[i]=='A1') {
                                $(".testdrp option[value='1']").attr("selected", true);
                                }
            else if(array1[i]=='B1') {
                                $(".testdrp option[value='2']").attr("selected", true);
                                }
            else               {
                                $(".testdrp option[value='3']").attr("selected", true);
                              }
    }

However, I am not able to select the correct values for each rows. Is there any proper way for achieving the same here?

charlietfl · Accepted Answer · 2020-08-08 19:24:06Z

1

Use newrow.find('select') to target the current one within the loop

const vals = {
  A1: 1,
  B1: 2,
  C1: 3
},
array1 = ['A1', 'B1', 'C1'];

for (let i = 0; i < array1.length; i++) {
  let newrow = $("<tr>")
  let newcol = $("<td>" +
    "<select class='testdrp'>" +
    "<option value='1' >AAAA</option>" +
    "<option value='2' >BBBB</option>" +
    "<option value='3' >CCCC</option> </select></td></tr>");
  newrow.append(newcol);
  newrow.find('select.testdrp').val(vals[array1[i]])

  $("tbody.tablename").append(newrow);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="tablename"></tbody>
</table>

edited Aug 8, 2020 at 19:24

answered Aug 8, 2020 at 19:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhrumil Panchal Over a year ago

Its works like a charm. So I believe I was missing the cons vals use. Thanks alot @charlietfl Marking as the solution. Appreciate your quick resolution brother.

charlietfl Over a year ago

I did the vals object to cut down on number of if() needed . If that won't work would need more details. Works fine here with duplicates jsfiddle.net/rhputxk4

Collectives™ on Stack Overflow

Appending and Selecting option in dropdown from an Array in loop in Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related