如何在表格內的下拉列表中選擇一個值？

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

考慮你有如下表標記

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

這種方式可以進一步實現自己的功能，上面的代碼演示瞭如何在目標單獨的行不同的下拉列表。

Answer 2

我希望我理解你的權利！

結帳這樣：

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