Get the clickked row option dropdown menu value in Jquery

Question

i have around 15 row in a table, each row comprises of a dropdown menu. Here is the code of my dropdown

<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>

Now if i click on 4th row, i need what is the option value selected in 4th row.

When i click on 3rd column of a row, i m reading 1st column text. Like this i need to read the option selected in the row.

     $('#Requests td:nth-child(3)').bind('click', function () {

            var id = $(this).parents('tr:first').find('td:eq(0)').text();
});

Answer 1

you can do like this:

$('#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();
});

you should be using on as it is recommended:

 $('#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

Try this:

$('#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);
});

---

And there in your code i assume you are not applying same ids for multiple select dropdown element. If this is the case then i would say that is not a valid HTML markup you have to give different ids to the select elements or you can change the id attribute to class.

Answer 3

First of all you cannot use same id for select tag in multiple places, so change it to class like

class="Dropdown"

You need to find selected value in dropdown like below code

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

Answer 4

This can be obtained by simply assigning a class to your dropdown menu

See the jsfiddle

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

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

});