CODEWITHSUNDEEP
jqueryhtml
gregnnylf94
gregnnylf94

Reputation: 380

Get the selected option value of dropdown in last column of row in html table Jquery

I have a table with 30 columns or so and I want to get the selected option for the dropdown that appears in each row. I have the below currently, but it returns null or undefined.

<table class="table table-hover">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>Invite Status</th>
  </tr>
</thead>
<tbody id="invitees">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
    <td><select class="form-control"><option value="Invitee" selected="selected">Invitee</option><option value="Alternate">Alternate</option></select></td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
    <td><select class="form-control"><option value="Invitee" selected="selected">Invitee</option><option value="Alternate">Alternate</option></select></td>
  </tr>

  <!-- and so on ... Built Dynamically -->

</tbody>


$('#invitees tr').each(function () {
    invite_statuses += $('td:last select').find('option:selected').val() + ",";
})

or 

$('#invitees tr').each(function () {
    invite_statuses += $('td:last select').find('option:selected').text() + ",";
})

Am I missing something obvious or can this just not be done? It seems like this should work...

Upvotes: 2

Views: 2613

Answers (2)

Woodrow
Woodrow

Reputation: 2832

Looks like your table is missing the id(#) selector of "invitees". Once you have that, you can then loop through the table rows, get the last td select value, push that to an array, and then join it into a comma delimited list. Also, you are missing the closing </select> on your selects.

var invite_statuses = [];

$(document).ready(function() {

  $('#invitees tbody tr').each(function() {
    var selection = $(this).find('td:last option:selected').val();
    console.log(selection);
    invite_statuses.push(selection);
  });

  console.log(invite_statuses.join(','));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="invitees" class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Invite Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>
        <select class="form-control">
      <option value="Alternate">Alternate</option>
      <option value="Invitee" selected="selected">Invitee</option>
      </select>
      </td>
    </tr>

    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>
        <select class="form-control">
      <option value="Alternate" selected="selected">Alternate</option>
      <option value="Invitee" >Invitee</option>
      </select>
      </td>
    </tr>

    <!-- and so on ... Built Dynamically -->

  </tbody>
</table>

Upvotes: 0

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

You can directly refer the select box. The following solution gives selected items from each select box. check the console value. 

var rst="";
$('select').each(function () {
    rst+=$(this).find('option:selected').text()+" ";
});
console.log(rst);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>Invite Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
    <td><select class="form-control"><option value="Invitee" selected="selected">Invitee</option><option value="Alternate">Alternate</option></td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
    <td><select class="form-control"><option value="Invitee" >Invitee</option><option selected="selected" value="Alternate">Alternate</option></td>
  </tr>

  <!-- and so on ... Built Dynamically -->

</tbody>

Upvotes: 2

Related Questions