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

Question

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

Answer 1

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>