如何在表格内的下拉列表中选择一个值？

Question

如果我有一个包含多行的表，并且每一行都有相同的选择框，我将如何获取所选下拉列表的值？无论我选择哪一行，我目前只能获得第一行中的第一个值。

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

希望我理解你的正确！

看看这个：

// true: test onChange, false: use jQuery Event
var testOnChange = true; 


var $selectboxes = $('table').find('select');
$selectboxes.on('change', function() {
   if(testOnChange) {
     return;
   }
  
   var $select = $(this);
   var selectedText = $select.find('option:selected').text();
   var selectedValue = $select.val();
   $select.parent().next('td').html('Oh ' + selectedText + ', ' + selectedValue + '!!!' + '<br>Index: ' + $selectboxes.index(this));
});


function updateStatus(element) {
 
   if(!testOnChange) {
     return;
   }
  
   var $select = $(element);
   $select.parent().next('td').html(element.value + ' <br> ' + element.innerHTML + '<br> Index: ' + $selectboxes.index($select));
}

table, td {
  border: 1px solid #ccc;
}

td {
  padding: 10px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <th>What i need?</th>
  <th>Really?</th>
</tr>
<tr>
  <td>
    <select onChange="updateStatus(this)">
      <option value="yes">Bier</option>
      <option value="yes">V(W)odka</option>
      <option value="no">Water</option>
    </select>
  </td>
  <td></td>
</tr>
<tr>
  <td>
    <select onChange="updateStatus(this)">
      <option value="yes">McDonalds</option>
      <option value="yes">Burger King</option>
      <option value="no">Fish</option>
    </select>
  </td>
  <td></td>
</tr>
<tr>
  <td>
    <select onChange="updateStatus(this)">
      <option value="no">-500$</option>
      <option value="yes">1.000.000$</option>
      <option value="yes">500$</option>
    </select>
  </td>
  <td></td>
</tr>  
</table>

Answer 2

假设您有下面的表格标记

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

您可以遍历每一行并找到选定的值。

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

这样您可以进一步实现您的功能，上面的代码显示了如何在单独的行中定位不同的下拉菜单。