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

时间:2015-03-20 01:01:09

标签: javascript jquery

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

以下是我的表格。例如,我想要一种方法来保存" / leads / 50"和#34;代理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>

我努力尝试解决这个问题。我的代码为我提供了所选选项的文本,但只显示了第一个网址&#34; / leads / 50&#34;而不是任何其他的。任何帮助将不胜感激。谢谢!

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

2 个答案:

答案 0 :(得分:1)

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

因此,删除ID并将ID值指定为类,然后您需要找到已更改tr的{​​{1}}并在其中找到agent_lead

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

答案 1 :(得分:0)

以下内容如何:

$(document).ready(function () {
    $("#agent_lead").on('change',function (event) {
        // var id = this.val();
        var elem = $('#agent_lead option:selected');

        alert(elem.val() + '/' + elem.text()+" "+$('#lead_path').val());
    });
});

这是jsfiddle https://jsfiddle.net/oqjvw25n/1/