Question

如何从下表中的第三个单元格中选择所选文本？

我在点击第二个单元格中的超链接时尝试了代码$(this).closest('tr').find("td:eq(3)").text()，但它从下拉列表中检索了所有选项。

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

顺便说一句，这个answer会帮助您更好地理解<select>。

Answer 2

我并非100％确定我理解 "select the selected text" 的含义，所以：

如果您在所选value的{{1}}之后，您只需获取option元素的value即可所选select的{{1}}。
如果您在所选value的{{1}}之后，可以使用selectedOptions获取所选的option，并从那里获取textContent

<强>段：

＆＃13;

textContent

＆＃13;

option

＆＃13;

从表格单元格中检索所选选项

2 个答案: