How to get all the values of jQuery datatable columns in all rows which contains dropdownlist

Question

I have 5 columns in my jQuery data table and the fifth one is a dropdown list as shown below:

enter image description here

I want to save the data in this data table. So I want to iterate through all the columns of all rows in this data table. The fifth column is a drop down list and the user selects one item from the list. The item's name is displayed in the dropdown list but each dropdown item has an id value and a text name in it. And "None" is the default value shown in the drop down list at first. The DataSet is used to populate the data table and Dropdown list is also populated with another dataset.

In .cshtml

             <tbody>
              @foreach (System.Data.DataRow row in DataSet.Tables[0].Rows)
              {
              <tr>
                @foreach (System.Data.DataColumn column in DataSet.Tables[0].Columns)
                  {
                      <td>@row[column]</td>
                  }
              <td>
              <div class="ddlPanel">

              <select id="ddlSettingName" name="settingNameList" class="form-control select2">

                  <option value="0">None</option>
                         @foreach (var item in ViewBag.DropdownOptions) // viewbag is dataset
                            {
                              <option value="@item.Value">@item.Text</option>
                            }
               </select>                                        
               </div>
              </td>
             </tr>
             }
           </tbody>

And the code for getting each column values of each row including the id and text value of the dropdown is shown below:

         <script type="text/javascript">

           function Save() {
                
               var newDoorListForAdd = new Array();
               var table = document.getElementById("newTable");
               var tableLength = table.rows.length;
               for (var i = 0; i < tableLength - 1; i++) {            
                    var trial = $("#ddlSettingName option:selected").text();
                    alert(trial);
               }
            }

The above code is not working. I want to get all the values (including id and text value of dropdown selected item) of each row. How can I achieve it ?

Answer 1

use something like this:

$data = []; // saves all table rows
// loop on each row
$("#table").find("tr").each(function(){
  $tdData = []; 
  // loop on each td indside row
  $(this).find("td").each(function(){
     $tdData.push($(this).text());
  });
  $selectData = [];
  // loop on one select inside row
  $(this).find("select option:selected").each(function(){
     $selectData.push({
       key: $(this).text(),
       value: $(this).attr('value'),
     });
  });
  $data.push({
    'td':  $tdData,
    'select':  $selectData
  });
});