Mike Mike - 23 days ago 6
jQuery Question

How do I select a value in a dropdown inside a table?

If I have a table with multiple rows, and each row has the same select box, how would I get the value of the selected dropdown? I'm currently only getting the first value in the first row no matter what row I pick.

<form action="<?php echo $_POST['PHP_SELF'] ; ?>" method="post">
<table class="radius" id="drTable">
<tr>
<th><a href="index.php?page=donation-requests&amp;order_by=a.dr_id&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">ID</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.lastname&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Name</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=d.location&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Store</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.organization&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Organization</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.event_name&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Event Name</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.event_date&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Event Date</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.date_required&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Date Needed By</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=a.date_requested&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Date Requested</a></th>
<th><a href="index.php?page=donation-requests&amp;order_by=c.status&amp;order_direction=<?php if($order_direction == "ASC") { echo "DESC" ; } else { echo "ASC" ; } ?>">Status</a></th>
<th class="text-center">View/Edit</th>
<th class="text-center">Delete</th>
</tr>
<?php
while($row = $result->fetch()) {
?>
<tr>
<td><?php echo $row['dr_id'] ; ?></td>
<td><?php echo $row['lastname'].", ".$row['firstname'] ; ?></td>
<td><?php echo $row['location'] ; ?></td>
<td><?php echo $row['organization'] ; ?></td>
<td><?php echo $row['event_name'] ; ?></td>
<td><?php echo date("F j, Y", $row['event_date']) ; ?></td>
<td><?php echo date("F j, Y", $row['date_required']) ; ?></td>
<td><?php echo date("F j, Y", $row['date_requested']) ; ?></td>
<td>
<select class="radius" onchange="updateStatus(<?php echo $row['dr_id']; ?>);">
<option selected="true" disabled="disabled"><?php echo $row['status'];?></option>
<?php echo statusOptions($row['status']) ; ?>
</select>
</td>
<td class="text-center"> <a href="index.php?page=donation-requests-edit&amp;viewing_id=<?php echo $row['dr_id'] ; ?>&status=<?php echo $_GET['status'] ; ?>"><i class="fi-pencil size-24"></i></a></td>
<td class="text-center"><a href="#" onClick="deleteRequest(<?php echo $row['dr_id'] ; ?>)"><i class="fi-trash size-24"></i></a></td>
</tr>

<?php
}
?>
</table>
</form>


jquery:

function updateStatus(dr_id) {

var id = dr_id;


$.ajax({ //create an ajax request to load_page.php
type: "GET",
// url: "drStatus_update.php?id="+id+"&status="+status,
dataType: "html", //expect html to be returned
success: function(response){
//alert(response);
alert(status);
}

});

}

Answer

Consider you have below table markup

        <table id="tblData">
            <tr>
                <td>
                    <select>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="21">21</option>
                        <option value="22">22</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="31">31</option>
                        <option value="32">32</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="41">41</option>
                        <option value="42" selected="selected">42</option>
                    </select></td>
            </tr>
        </table>

You can loop through each row and find the selected value.

       // loop through each row.
       $("#tblData tr").each(function () {
            // find the select tag and get its selected value.
            $(this).find("select").val();
        });

This way you can further achieve your functionality, above code shows how to target different dropdown in separate row.