How do i select dropdown values which is outside from easyui datagrid table

I'm working on the Codeigniter web application where I have used the jquery easyui Datagrid table, I have created the dropdown which is outside from the easyui Datagrid table, now how do I select dropdown value when Datagrid table is loaded?

Problem is that function is working but function selected all values from together from the dropdown, I need to select single dropdown value which is equal status value?

Datagrid Table

<table
                id="tt"
                class="easyui-datagrid"
                url="<?php echo base_url()."contacts/contacts_list_data"; ?>"

                pagination="true"
                rownumbers="true"
                toolbar="#tb"
                pageSize="10"
                pageList="[5,10,20,50,100]"
                fit= "true"
                fitColumns= "true"
                nowrap= "true"
                view= "detailview"
                idField="id"
                >
            <thead>
            <tr>
                <th field="id"  checkbox="true"></th>

                <th field="status"  sortable="true"><?php echo $this->lang->line('Status'); ?></th>
                <th field="status_type"  formatter='status_column'><?php echo $this->lang->line('Status'); ?></th>
                 </tr>
            </thead>

        </table>

Dropdown which is outside datagrid table

  <script>
    function status_column(value,row,index)
    {
        var inputVal = document.getElementById("status_column").innerHTML;
        return inputVal;
    }
    </script>
    <div id="status_column" style="display:none">
    
       <select name="stat_column" id="stat_column"  class="form_control stat_column">
            <option value="">Select Status</option>
            <option value='All'>All</option>
            <option value='Open'>Open</option>
            <option value='Closed'>Closed</option>
            <option value='Won'>Won</option>
            <option value='Lost Price is High'>Lost Price is High</option>
            <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
            <option value='Lost Other'>Lost Other</option>
            <option value='Never Replied Back'>Never Replied Back</option>
            <option value='Bad Email'>Bad Email</option>
            <option value='Bad Number'>Bad Number</option>
            <option value='Do Not Disturb'>Do Not Disturb</option>
       </select>
    </div>

function to get dropdown values select based on the datagrid table column values

<script>
    var selected=[];
    $(function () {
        $('#tt').datagrid({
            onLoadSuccess:function(index, row ){
                var rows = $('#tt').datagrid('getRows');
                if(rows){
                    $.each(rows, function( index, row ) {
                        console.log(row+index)
                        selected.push(row.status)
                    })
                    console.log(userstatus);
                    $('#stat_column option[value="' + selected + '"]', row).attr('selected', 'selected');
                }
            }
        });
    })
</script>

Here the screenshots of the table and console

Solution

You can use index value to get the tr where you need to set selected value then use .find() to find your select-box inside that tr and use .prop to set selected option.

Demo Code :

 var selected=[];
$(function() {
  $('#tt').datagrid({
    onLoadSuccess: function(index, row) {
      var rows = $('#tt').datagrid('getRows');
      if (rows) {
        $.each(rows, function(index, row) {
          //get the tr with index same ..and then use .find to get select and set slected there ...
          $('.datagrid-body tr[datagrid-row-index =' + index + ']').find('select option[value="' + row.status.trim() + '"]').prop('selected', true);
           selected.push(row.status)
        })
      }
    }
  });
})

function status_column(value, row, index) {
  var inputVal = document.getElementById("status_column").innerHTML;
  return inputVal;
}

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<!--i have remove `url=".."` just for demo-->
<table id="tt" class="easyui-datagrid" pagination="true" rownumbers="true" toolbar="#tb" pageSize="10" pageList="[5,10,20,50,100]" fit="true" fitColumns="true" nowrap="true" view="detailview" idField="id">
  <thead>
    <tr>
      <th data-options="field:'id',width:80" checkbox="true"></th>
      <th data-options="field:'status',width:90" sortable="true">
        Status
      </th>
      <th data-options="field:'status_type',width:80" formatter='status_column'>
        Status
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      </td>
      <td>
        Open
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Closed
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Do Not Disturb
      </td>

    </tr>
  </tbody>

</table>

<div id="status_column" style="display:none">

  <select name="stat_column" class="form_control stat_column">
    <option value="">Select Status</option>
    <option value='All'>All</option>
    <option value='Open'>Open</option>
    <option value='Closed'>Closed</option>
    <option value='Won'>Won</option>
    <option value='Lost Price is High'>Lost Price is High</option>
    <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
    <option value='Lost Other'>Lost Other</option>
    <option value='Never Replied Back'>Never Replied Back</option>
    <option value='Bad Email'>Bad Email</option>
    <option value='Bad Number'>Bad Number</option>
    <option value='Do Not Disturb'>Do Not Disturb</option>
  </select>
</div>