Dynamically set the "selected" attribute using Javascript

Question

Here is my code:

$.ajax({   
    type: "POST",
    url: "localhost/api.php",
    data: {id:user_id},
    cache: false,
    success: function(data) {

        var obj = $.parseJSON(data); 
        if (obj.msg == "1")
        {
            $.each(obj.userList, function(i,value) {
                var jArray = <?php echo json_encode($groupData ); ?>;
                list = [];
                for (var i = 0; i < jArray.length; i++) {
                    list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
                }
                var html ="<tr>"+
                        "<td>"+value['id']+"</td>"+
                        "<td>"+value['groupID']+"</td>"+ 
                        "<td><select name='Group[]''>"+list+ "</select></td>";
                $('table#List tbody').append(html);

            });
        }
    },
    alert('Error');
});

I'm dynamically constructing the html based on the ajax response. In the code snippet >

 var jArray = <?php echo json_encode($groupData ); ?>;
 list = [];
 for (var i = 0; i < jArray.length; i++) {
      list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
 }

$groupData is a PHP array. So I'm converting it into a Javascript array and using this jArray to generate the "option" and push the resulting list array. I'm appending this list array into the html and this much is working perfectly. Now there are 6 groups and one of them is already set for a particular user in the database. So currently none of the "option" has selected attribute. I'm having trouble in comparing jArray[i].Group_Id with value['groupID']. What I want to achieve is I want to compare jArray[i].Group_Id with value['groupID'] and if they are equal then set a selected attribute to that particular . How do I write an if statement for the comparison inside the "option" ?

what's preventing you from comparing the two values? One thing I see is that you don't decode your json to an actual array in the js code. — Velimir Tchatchevsky
– Velimir Tchatchevsky, Commented Oct 26, 2018 at 18:03
actually I'm not able to figure out how to write the if statement inside the <option> correctly. — node_man
– node_man, Commented Oct 26, 2018 at 18:06
oh, you are looking for a ternary operator "...id="+ ( a == b ? "yes" : "no" ) + "... rest of string" — Velimir Tchatchevsky
– Velimir Tchatchevsky, Commented Oct 26, 2018 at 18:09
exactly. I just want to achieve something like <option if(jArray[i].Group_Id = value['groupID']) > and if they are equal then add a "selected" attribute to the option with reference to my code as I'm creating a string of options — node_man
– node_man, Commented Oct 26, 2018 at 18:14

Ryan Cogswell · Accepted Answer · 2018-10-28 13:48:54Z

5

Here's some example code showing this working:

const jArray = [{Group_Id: 1, Group_Name: 'One'}, {Group_Id: 2, Group_Name: 'Two'}];
const userList = [{id: 'user1', groupID: 2}, {id: 'user2', groupID: 2}, {id: 'user3', groupID: 1}];
$.each(userList, function(x,value) {
  list = [];
  for (var i = 0; i < jArray.length; i++) {
    list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + (jArray[i].Group_Id == value.groupID ? ' selected ' : '') + '>' + jArray[i].Group_Name + '</option>');
  }
  var html ="<tr>"+
      "<td>"+value.id+"</td>"+
      "<td>"+value.groupID+"</td>"+ 
      "<td><select name='Group[]''>"+list+ "</select></td>";
  $('table#List tbody').append(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="List">
  <tbody></tbody>
</table>

The important piece missing from your code being:

(jArray[i].Group_Id == value.groupID ? ' selected ' : '')

edited Oct 28, 2018 at 13:48

answered Oct 26, 2018 at 18:34

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

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

1 Comment

node_man Over a year ago

thank you so much. this is exactly what I wanted to achieve.

Collectives™ on Stack Overflow

Dynamically set the "selected" attribute using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related