在Jquery中获取单击的行选项下拉菜单值

Question

我在一个表中有大约15行，每一行包括一个下拉菜单。下面是我的下拉菜单

的代码

<td headers="Vehicles">
<select id = "Dropdown">
    <%if (ViewData.Model.Details.ElementAt(i).vehicle == "Car")%>
    <%{%>
      <option value="car" selected="selected">car</option>
      <option value="Bus">Bus</option>
      <option value="Lorry">Lorry</option>
    <%} %>
    <%else if (ViewData.Model.Details.ElementAt(i).vehicle == "Bus")%>
    <%{%>
       <option value="car" >car</option>
      <option value="Bus" selected="selected">Bus</option>
      <option value="Lorry">Lorry</option>
    <%} %>
    <%else if (ViewData.Model.Details.ElementAt(i).vehicle == "Lorry")%>
    <%{%>
     <option value="car">car</option>
      <option value="Bus">Bus</option>
      <option value="Lorry" selected="selected">Lorry</option>
    <%} %>
    </select>
</td>

现在如果我点击第4行，我需要在第4行选择的选项值是什么。

当我点击一行的第三列时，我正在读取第一列的文本。像这样，我需要读取行中选择的选项。

     $('#Requests td:nth-child(3)').bind('click', function () {
            var id = $(this).parents('tr:first').find('td:eq(0)').text();
});

Answer 1

你可以这样做:

$('#Requests td:nth-child(3)').bind('click', function () {
var id = $(this).parents('tr:first').find('td:eq(0)').text();
var selected =  $(this).parents('tr:first').find('td:eq(0)').find('select#Dropdown').val();
});

您应该使用on，因为它是推荐的:

 $('#Requests td:nth-child(3)').on('click', function () {
    var id = $(this).parents('tr:first').find('td:eq(0)').text();
    var selected =  $(this).parents('tr:first').find('td:eq(0)').find('select#Dropdown').val();
    });

Answer 2

试试这个:

$('#Requests td').on('click', function () {
   var id = '';
   var ddVal = $(this).closest('tr').find('select :selected').val();
   if($(this).index() === 2){
     var id = $(this).closest('tr').find('td:eq(0)').text();
   }
   console.log(id);
   console.log(ddVal);
});

---

在你的代码中，我假设你没有为多个select下拉元素应用相同的id。如果是这种情况，那么我会说这不是一个有效的HTML标记，您必须为选择元素提供不同的id，或者您可以将id属性更改为class。

Answer 3

首先，你不能在多个地方为select标签使用相同的id，所以将其更改为class，如

class="Dropdown"

你需要在下拉菜单中找到选择的值，就像下面的代码

$("#tableId tr").click(function() {
    var selectedOption =  $(this).find(".Dropdown").val();
    alert(selectedOption );
});

Answer 4

这可以通过简单地为下拉菜单分配一个类来获得

见jsfiddle

http://jsfiddle.net/3bgQ9/1/

$(function(){
$(".sel").change(function(){
    alert($(this).val());
});

});