How to get the Id and Text value of a dropdownlist in jQuery Datatable
How to get the Id and Text value of a dropdownlist in jQuery Datatable
chandhu
Posts: 19Questions: 6Answers: 0
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#.
This question has accepted answers - jump to:
Answers
One issue is you have more than one
#ddlSettingNameids on the page. The id is to be unique.You can use
rows().every()to loop through all the rows. In the loop usecell().node()to get the HTML content of the column with theselectelements.Go to this example and paste the following code into the browser’s console to see a demo:
Kevin
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.
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 theid.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
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>......
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:
Or use
cell().node()like the above example.Kevin
Thanks @Kevin it worked.