CODEWITHSUNDEEP
javascriptjquery
Syed
Syed

Reputation: 2607

Get selected option value of select tag inside a td in a table

I'm adding a select option tag in a table dynamically and while submitting I'm iterating the table tr to find the element in the td. It returns me the select tag as string itself. Here I'm not able to get the selected option of select tags

My code is

$('#tableid tbody tr').each(function() {   
       var countryTag = $(this).find('td:eq(2)').html(); // return the whole select option as string
       var selCntry = countryTag.find('option:selected').val(); // this is throwing error.
 }

But while adding select tag to table , selected attribute is not available to any option.

How can I get all selected countries

P.S : this post is made via mobile. So there may be any typo

Upvotes: 1

Views: 10425

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

Thats because your are calling the function html() on it, you can only call find() on the jquery element

Use

$('#tableid tbody tr').each(function() {   
       var countryTag = $(this).find('td:eq(2)'); // return the whole select option as string
       var selCntry = countryTag.find('option:selected').val(); // this is throwing error.
 }

or you can do it in a single command like

 $('#tableid tbody tr').each(function() {   
       var value = $(this).find('td:eq(2) options:selected').val(); // return the whole select option as string

 }

Upvotes: 3

vijayP
vijayP

Reputation: 11502

Could you please try something like this:

$('#tableid tbody tr').each(function() {   
    var tdObject = $(this).find('td:eq(2)'); //locate the <td> holding select;
    var selectObject = tdObject.find("select"); //grab the <select> tag assuming that there will be only single select box within that <td> 
    var selCntry = selectObject.val(); // get the selected country from current <tr>
});

Upvotes: 6

Related Questions