点击按钮获取同行Select下拉框值的结果格式不符问题

我想通过按钮获取同一行里Select下拉框的选项值：

• 直接给Select绑定函数时，能拿到符合预期的结果（所有值都在基础层级）；
• 但通过按钮触发获取时，结果格式不对。变量getValue存的是获取到的内容，调用getValue[0]只能拿到类似select#manufacturer_1的元素标识，我需要实现和直接绑定Select时一样的效果。

HTML #

<table>
  <tr>
    <td>
      <select class="manufactor-selector-dropdown">
        <option>Manufactor1</option>
        <option>Manufactor2</option>
        <option>Manufactor3</option>
        ...
      </select>
    </td>
    <td>
       <button>Select Values </button>
    </td>
  </tr>
 </table>

JavaScript #

function(n) {
   var getValue = $(n).parents('tr').find('td .manufactor-selector-dropdown');
   var getSelectedValue = getValue.val();
}

你现在的问题是getValue是jQuery包装后的DOM对象集合，不是直接的选项值集合。分两种情况处理：

1. 只需要选中的选项值 #

如果只是要当前选中的选项值，你代码里的getSelectedValue其实已经是正确结果了，直接用就行。可以优化代码让它更高效：

function(n) {
   // 找到当前行的目标Select
   var $select = $(n).closest('tr').find('.manufactor-selector-dropdown');
   // 获取选中值
   var selectedValue = $select.val();
   // 要是需要选中的文本，用这个
   var selectedText = $select.find('option:selected').text();
   console.log('选中值：', selectedValue, '选中文本：', selectedText);
}

2. 需要获取所有选项的文本/值 #

如果要拿到所有选项的信息（和直接绑定Select时能获取的全量选项效果一致），得遍历所有<option>元素，把值提取成数组：

function(n) {
   var $select = $(n).closest('tr').find('.manufactor-selector-dropdown');
   // 所有选项的文本数组
   var allOptionTexts = $select.find('option').map(function() {
       return $(this).text();
   }).get();
   // 所有选项的值数组（如果option有value属性就取value，没有就取文本）
   var allOptionValues = $select.find('option').map(function() {
       return $(this).val() || $(this).text();
   }).get();
   console.log('所有选项文本：', allOptionTexts);
   console.log('所有选项值：', allOptionValues);
}

关键点 #

• 用closest('tr')代替parents('tr')更高效，只会找最近的父级tr；
• getValue[0]是原生DOM元素，要拿值的话可以用getValue[0].value，但用jQuery的val()更方便；
• 要得到“所有值处于基础层级”的效果，必须把每个选项的内容提取出来放到数组里，不能直接用jQuery对象。

内容的提问来源于stack exchange，提问作者Keith