How to get the Id and Text value of a dropdownlist in jQuery Datatable

chandhu

I have 5 columns in my jQuery data table and the fifth one is a dropdown list. 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 SaveToDB() {                
                                        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 ? This application is ASP.Net Core MVC C#.

kthorngren

One issue is you have more than one #ddlSettingName ids on the page. The id is to be unique.

You can use rows().every() to loop through all the rows. In the loop use cell().node() to get the HTML content of the column with the select elements.

Go to this example and paste the following code into the browser’s console to see a demo:

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var data = this.data();
    var name = data[0];
    
    var td = table.cell( this, 3 ).node();
    
    var selected = $('option:selected', td).text();
    
    console.log(name, selected)
    
} );

Kevin

chandhu

Hi @Kevin I used your answer in my code and these lines returns "empty" value -
var td = table1.cell(this, 3).node();
var selected = $('option:selected', td).text();
alert(selected);
//alert(name, selected);

I want id and text value of selected dropdownlist along with other columns in every row. Please help.

kthorngren

The example code I provided works with the example I linked to. There must be some differences with your table that is doesn't work as expected. However the example shows how to get the full row data and how to use cell().node() to target specific cells in the row to use jQuery methods to get the desired information. You could use jQuery attr() to get the id.

If you need help making this work with your solution then please provide a test case replicating the data in your table so we can provide more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chandhu

Hi @Kevin these lines -
var data = this.data();
var name = data[6];
alert(name); - gets all the dropdownlist values like shown below
<option value = "1234">BB ALTO WON</option>......

kthorngren

Yes, the data in the cell it the HTML for the -tag select` and options. One option is to use jQuery to get the HTML element, for example:

$( data[6] ).val();

Or use cell().node() like the above example.

Kevin

chandhu

Thanks @Kevin it worked.