javascript - Jquery如何在表中显示特定的输入值

Question

我正在使用循环在表中显示数据，我想要一种方法来提取特定于用户单击的下拉选项的两个元素。首先，我想从所选标签中获取文本值。其次，我想获取附带的 url，它是隐藏输入字段 (#"lead_path") 的值。

这是我的下表。例如，如果用户单击此下拉选项，我想要一种将“/leads/50”和“Agent 456”保存到单独的变量中的方法。为了简洁起见，仅显示循环中的第一个表行，但每个表行看起来与下面的完全相同。

<td>
  <a href="/leads/50">Mellie Price IV</a></td>
  <p><input type="hidden" name="lead_path" id="lead_path" value="/leads/50" /></p>
  <td>12:24 am 03-09-2015</td>
  <td>
      <strong>Count:</strong> 0<br />
      <strong>Most recent:</strong> $100,000+, Hamillburgh
  </td>
  <td> 9:24 am 03-16-2015</td>
  <input type="hidden" name="agent_id" id="agent_id" value="6" />
  <td><select name="agent[lead]" id="agent_lead">
   <option value="1">Jeff Manson</option> 
   <option value="2">Kevin McCarthy</option>
   <option value="3">Warsama Gabriel</option>
   <option value="4">Chris Sass</option>
   <option value="5">Agent123</option>
   <option selected="selected" value="6">Agent456</option>
   <option value="7">Agent789</option></select>
  </td>
</td>

这是我尝试解决这个问题的努力。我的代码获取所选选项的文本，但仅显示第一个网址“/leads/50”，而不显示任何其他网址。任何帮助将不胜感激。谢谢!

$(document).ready(function() {
$("table").delegate("#agent_lead", "change", function(){
  var agent_name = $("option:selected", this).text();
  alert($('#lead_path').val());
});

Answer 1

由于每个 tr 中都有相同的元素，因此不应使用这样的 ID，因为元素的 ID 必须是唯一的，请使用 class 来选择它们。

因此，删除 id 并将 id 值分配为类，然后，您需要找到更改后的 agent_lead 的 tr 并找到 lead_path 在里面

<input type="hidden" name="lead_path" class="lead_path" value="/leads/50" />
<select name="agent[lead]" class="agent_lead">

然后

$("table").delegate(".agent_lead", "change", function () {
    var agent_name = $("option:selected", this).text();
    alert($(this).closest('tr').find('.lead_path').val());
});

此外，隐藏输入似乎不在 td 内，因此将其移至第一个 td 内

<td>
    <a href="/leads/50">Mellie Price IV</a>
    <input type="hidden" name="lead_path" id="lead_path" value="/leads/50" />
</td>