Retrieving selected option from a table cell

Question

How can i select the selected text from third cell in the below table?

I tried the code $(this).closest('tr').find("td:eq(3)").text() on click of a hyperlink in the second cell, but its retrieving all the options from drop down.

<table class="table table-bordered table-hover table-condensed">
       <thead>
          <tr>
             <th>#</th>
             <th>User Name</th>
             <th>Email Id</th>
             <th>Contact</th>         
          </tr>
       </thead>
       <tbody>
          <tr>
             <td></td>         
             <td style="text-align: center;"><a class="enq_quest_lnk" id="118226023178108086021825461254">View</a></td>
             <td>
                <select class="form-control input-sm">
                   <option value="1" selected="">Enquiry Received</option>
                   <option value="2">Response Sent</option>               
                </select>
             </td>
            
             <td><a href="#" value="118226023178108086021825461254" id="enqsave" class="btn btn-sm btn-custom">&nbsp;&nbsp;Save&nbsp;&nbsp;</a></td>        
          </tr>
       </tbody>
    </table>

Answer 1

function onChange() {
 const select = document.getElementsByTagName('select')[0];
 let selectedOption = select.options[select.selectedIndex].text
 
 console.log(selectedOption)
}

onChange()

<table class="table table-bordered table-hover table-condensed">
   <thead>
      <tr>
         <th>#</th>
         <th>User Name</th>
         <th>Email Id</th>
         <th>Contact</th>         
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>         
         <td style="text-align: center;"><a class="enq_quest_lnk" id="118226023178108086021825461254">View</a></td>
         <td>
            <select class="form-control input-sm" onchange="onChange()">
               <option value="1" selected="">Enquiry Received</option>
               <option value="2">Response Sent</option>               
            </select>
         </td>

         <td><a href="#" value="118226023178108086021825461254" id="enqsave" class="btn btn-sm btn-custom">&nbsp;&nbsp;Save&nbsp;&nbsp;</a></td>        
      </tr>
   </tbody>
</table>

BTW, this answer will help you understand <select> better.

Answer 2

I'm not 100% certain I understand what you mean by "select the selected text", so:

• if you're after the value of the selected option you can simply get the value of the select element, which is always the value of the selected option.

• if you're after the textContent of the selected option, you can use the selectedOptions to get the selected option and from there its textContent.

Snippet:

/* ----- JavaScript ----- */
$("#enqsave").on("click", function () {
  var
    /* Get the 'select' element. */
    select = $(this).closest("tr").find("select.input-sm")[0],
    
    /* Get the selected option and save its textContent. */
    textContent = select.selectedOptions[0].textContent;
  
  /* Log the value and textContent of the selected option. */
  console.log("value: ", select.value);
  console.log("textContent: ", textContent);
});

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="form-control input-sm">
         <option value="1" selected="">Enquiry Received</option>
         <option value="2">Response Sent</option>               
      </select>
    </td>
    <td>
      <a href="#" id="enqsave">Save</a>
    </td>
  </tr>
</table>