Wie wähle ich einen Wert in einem Dropdown in einer Tabelle aus?

Question

Wenn ich eine Tabelle mit mehreren Zeilen habe und jede Zeile das gleiche Auswahlfeld hat, wie würde ich den Wert des ausgewählten Dropdowns erhalten? Ich bekomme momentan nur den ersten Wert in der ersten Reihe, egal welche Reihe ich auswähle.

<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

Betrachten Sie unter Tabellen-Markup haben

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

Sie können Schleife durch jede Zeile und finden Sie den gewählten Wert.

Auf diese Weise können Sie Ihre Funktionalität weiter verbessern. Der obige Code zeigt, wie Sie verschiedene Dropdown-Elemente in einer separaten Zeile ansteuern können.

Answer 2

Ich hoffe, dass ich Sie richtig verstanden! diese

Kasse:

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