Picking text from a particular column with jquery

Question

Good afternoon.

I need to take the value of one DropDownList in a given table column.

This would be the table:

 @model IEnumerable<Santander.Web.MVC.ValidacaoGanhadores.Models.Ganhadores>


<table id="tbValidacao">
    <thead>
        <tr style="height: 35px">
            <td></td>
            <td>Manter</td>
            <td>Matricula</td>
            <td>Nome</td>
            <td>Status</td>
            <td>Validado</td>

        </tr>
    </thead>
    <tbody>
        @{
            var count = 1;

            foreach (var item in Model)
            {
                @*item.Matricula.Contains("999") ? "Nao" : "Sim"*@
                <tr style="height: 35px">
                    <td>@count</td>
                    <td>@Html.DropDownList("DropManter", listItems)</td>
                    <td>@Html.TextBox("txtMatricula", "", new { @readonly = "readonly" })</td>
                    <td>@Html.TextBox("txtNome", "", new { @readonly = "readonly" })</td>
                    <td>@Html.TextBox("txtStatus", "", new { @readonly = "readonly" })</td>
                    <td>@(item.Rede == "Rede SP Capital" ? 1 : 2)</td>
                </tr>
                count = count + 1;
            }

        }






    </tbody>
</table>

The number of lines is variable, I need to take the value of this DropDownList of each line, as soon as it is changed.

I was trying this way:

 $('#tbValidacao tbody tr td').change(function () {

        var conteudo = $('#DropManter option:selected').text();
        alert(conteudo);

    })

Only it always returns me the value of the first line.

Answer 1

Paulo, to ensure that your HTML will be valid, I advise you to assign a unique ID for each element of your page, so I advise you to use this cont in your favor, however you can keep all Dropdownlist with the same name

@Html.DropDownList("DropManter-" + cont, listItems, new { @Name = "DropManter" })

then assign the direct change event to the Dropdownlist (a.k.a select) with the name='DropManter', you can access the select current by event.target and/or this:

$("select[name='DropManter']").change(function (event) {
    var dropManter = $(event.target);
    var conteudo = $('option:selected', dropManter).text();
    alert(conteudo);
})

Answer 2

The option @Tobymosque posted works, and will be your best option if you want to send those values somewhere. I’ll just leave an alternate form using the $(this) that @Tobymosque commented.

To do this, simply change the script for that reason:

            <script>
                $("select[name='DropManter']").change(function(){
                    var valor = $(this).val();
                    var texto = $('option:selected', $(this)).text();
                    alert(valor + ': ' + texto );
                });
            </script>

In this example it is executed when manipulating any element (select) within the id tbValidacao. By changing the value it will select the value of select that is being manipulated at the moment.

Look at an example on dotNetFiddle.

Answer 3

Hello, to get the value "value" of a select I usually use in jQuery o . val() example:

$("#usuario").change(function () {
   alert($("#usuario").val());
});