Receive select fill in jQuery

Question

Receive select fill in jQuery

Navigation

#1 by (2 votes)

0

I made a table where each row has a select and a refresh button. The problem is that when I click on the refresh of a particular row I want to update only that row and therefore I need to receive by jQuery only the number that is in the select of that row. The way I did it I get the numbers that are in the select of all the rows.

HTML:

<table border="0">

    <tr>

        <td class="td">
            Número
        </td>

    </tr>

    <?
    for($i = 0; $i < 10; $i++){
    ?>

        <tr class="tr">

            <td class="td">
                <select id="num">
                    <?php 
                    for($k = 1; $k < 5; $k++){
                        echo "<option> $k </option>";
                    }
                    ?>
                </select>

            </td>


            <td class="td">
                <form id="formulario" action="javascript:func()" method="post">
                    <input type="submit" value="Atualizar" />
                </form>
            </td>
        </tr>
    <?
    }
    ?>

</table>

jQuery:

<script type="text/javascript" language="javascript">

    $(document).ready(function(){
        $("form").submit(function(){
            var num = $("#num option:selected").text();
            alert(num);
        });
    });


</script>

Result:

Iwouldliketoseeonly1or4or3...dependingonwhichlinethe"Update" line is.

html jquery select tabela

asked by anonymous 13.01.2016 / 17:37

1 answer

How do you leave a TableLayout in a fixed size on the screen? Convention for attributes that preserve types

score 2 · Accepted Answer

Your problem is in the selector as you are generating several <select> in the for and they all have the id, which is unique, it can identify as only one, if you use class or until the tag to select will work out.

Example:

$(document).ready(function() {
  $("form").submit(function() {
    num = $(this).find('.num option:selected').text();
    alert(num);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><form><selectclass="num">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <input type="submit" value="Atualizar">
</form>

<form>
  <select class="num">
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select>
  <input type="submit" value="Atualizar">
</form>