Question

如果我点击按钮，我正在尝试获取基于选择的值。这是我的代码。

<tr>
  <td width="50%"><a href="clients_detail.asp?clientID=470">ABC Corp</a></td>
  <td width="50%">
    <select id="salesPersonID" name="salesPersonID" class="form-control">
      <option value="" 0""="">Select Contact</option>
      <option value="424">Aaron  Fick</option>
      <option value="492">John Smith</option>
    </select>
  </td>
  <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button>
  </td>
</tr>
<tr>
  <td width="50%"><a href="clients_detail.asp?clientID=471">CDEF Corp</a></td>
  <td width="50%">
    <select id="salesPersonID" name="salesPersonID" class="form-control">
      <option value="" 0""="">Select Contact</option>
      <option value="424">Aaron  Fick</option>
      <option value="492">John Smith</option>
    </select>
  </td>
  <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button>
  </td>
</tr>

如果单击第二行上的按钮，我想获取其正上方的选择框的值。这是我正在使用的代码，但似乎无法做到正确：

$(document).on('click','.but_save',function(){

    var value = $(this).closest('td.select').val();

});

Answer 1

您应该使用$(this).parent().prev('td').find('select').val()

$(this)获取<button>

.parent()转到按钮<td>

.prev('td')获取前一个<td>

元素

.find('select')获取<td>

中的选择内容

＆＃13;

$(document).on('click','.but_save',function(){
  var value = $(this).parent().prev('td').find('select').css('border','1px solid red').val();
  console.log(value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td width="50%"><a href="clients_detail.asp?clientID=470">ABC Corp</a></td>
  <td width="50%">
    <select id="salesPersonID" name="salesPersonID" class="form-control">
      <option value="" 0""="">Select Contact</option>
      <option value="424">Aaron  Fick</option>
      <option value="492">John Smith</option>
    </select>
  </td>
  <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button>
  </td>
</tr>
<tr>
  <td width="50%"><a href="clients_detail.asp?clientID=471">CDEF Corp</a></td>
  <td width="50%">
    <select id="salesPersonID" name="salesPersonID" class="form-control">
      <option value="" 0""="">Select Contact</option>
      <option value="424">Aaron  Fick</option>
      <option value="492">John Smith</option>
    </select>
  </td>
  <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button>
  </td>
</tr>
</table>

＆＃13;

Answer 2

第$(this).closest('td.select')行查找看起来像

的元素

<td class="select"></td>

并且由于TD没有价值，因此无法工作......
此外，最近的TD没有<select>元素，这将是同一TR内的另一个TD，所以你可能想要

var value = $(this).closest('tr').find('select').val();

Answer 3

尝试以下方法 -

＆＃13;

    &nbsp;
    &nbsp;

＆＃13;

$('.but_save').click(function() {
  var value = $(this).parent().prev().find('select').val();
  console.log(value);
});

＆＃13;

使用jquery获取表列中select的值

3 个答案: