在php中的foreach循环中获取项目选择的值

I want to retrieve the value of selected item while it is inside a loop to print it in javascript (alert(value)). I can't do this document.getelementbyid because it is inside a loop and the id will be repeated many times.

<?PHP
    foreach ($res->fetchAll() as $row) {
?>
<tr>
    <td>
        <?php echo $row['id']; ?>
        <input type="text" hidden value="<?php echo $row['id']; ?> " id="idartwork">
    </td>
    <td>
        <?php echo $row['name']; ?>                                     
    </td>

    <td>                
        <?php echo $row['creation_date']; ?>                            
    </td>

    <td>                
        <?php echo $row['artist']; ?>                                   
    </td>

    <td>
<?php
    if ($row['gallery'] == "") {
?>
    <select id="selectname">
        <option value=""></option>
        <option value="ghaya gallery">ghaya gallery</option>
        <option value="selma gallery">selma gallery</option>
    </select>

    <input type="button" value="affecter" onclick="affecter()">
    <input type="text" hidden value="<?php echo $row['gallery']; ?> " id="inputgallery">
    <!-- <input type="text" hidden value="--><?php //echo $row['id']; ?><!-- " id="idartwork">-->

<?php
} else {
echo $row['gallery'];
?>

<?php
}
?>
</td>

what I want to do is take the value of item select and put it in affecter() so I could print it

enter image description here

Use an $i variable with your foreach loop. Then add that $i to the end of each ID name, then increase the $i at the end of each loop. That way, when the loop creates the next element, each one will have a unique ID. Then you can use getElementByID in JavaScript.

<?php 
$i = 0;
foreach ($res->fetchAll() as $row) { ?>
     ...
    <select id="selectname<?php echo $i; ?>">
    ...
    <input type="button" value="affecter" onclick="affecter(<?php echo $i; ?>)">
    <?php $i++;
}  ?>

Now your selects will have a unique ID of selectname0, selectname1, etc. And your JavaScript onclick function will know the $i number of that element.

Then your JavaScript function becomes: function affecter(i) and add i to your getElementByID("selectname"+i)

Notes:

Duplicate ID are bad, use class instead. But that's not the point of this answer.

Steps to get selected value:

change the html to get the context (learn more about this).

onclick="affecter(this)"

get parent node of that input box,

const parentNode = element.parentNode;

get the select element,

const e = parentNode.querySelector("#selectname");
const selectedName = e.options[e.selectedIndex].value;
// const selectedName = e.value; // some prefers this way

Use it.

alert(selectedName);


function affecter(element) {
  const parentNode = element.parentNode;
  const e = parentNode.querySelector("#selectname");
  const selectedName = e.options[e.selectedIndex].value;

  parentNode.querySelector("b span").innerHTML = selectedName;
}
tr td {
  display: table;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <select id="selectname">
            <option value=""></option>
            <option value="ghaya gallery">ghaya gallery</option>
            <option value="selma gallery" selected>selma gallery</option>
        </select>
        <input type="button" value="affecter" onclick="affecter(this)">
        <b>selected: <span></span></span>
     </td>
    </tr>
    <tr>
      <td>
        <select id="selectname">
          <option value=""></option>
          <option value="ghaya gallery">ghaya gallery</option>
          <option value="selma gallery" selected>selma gallery</option>
        </select>
        <input type="button" value="affecter" onclick="affecter(this)">
        <b>selected: <span></span></span>
      </td>
    </tr>
  </table>
</body>
</html>

</div>

Add a unique identifier to the id of each of your select objects. This could be done even easier by just applying a .on('click' listener directly to the select element using jQuery, but here is the direct answer to your question:

function affecter(id)
{
    var e = document.getElementById(id);
    var itemValue = e.options[e.selectedIndex].value;
    alert(itemValue);
}
<?PHP
    foreach ($res->fetchAll() as $row) 
    {
?>
<tr>
    <td>
         <?php
             // The `id` field should be a proper identifier so we will use it
             echo $row['id'];
         ?>
        <input type="text" hidden value="<?php echo $row['id']; ?> " id="idartwork">
    </td>
    <td>
        <?php echo $row['name']; ?>                                     
    </td>

    <td>                
        <?php echo $row['creation_date']; ?>                            
    </td>

    <td>                
        <?php echo $row['artist']; ?>                                   
    </td>

    <td>
<?php
    if ($row['gallery'] == "") 
    {
        // Add a unique identifier to the end of each id
        echo '<select id="selectname'.$row['id'].'">';
?>
        <option value=""></option>
        <option value="ghaya gallery">ghaya gallery</option>
        <option value="selma gallery">selma gallery</option>
    </select>

<?php
    // Send the id to the function affecter()
    echo '<input type="button" value="affecter" onclick="affecter(\'selectname'.$row['id'].'\')">
    <input type="text" hidden value="'.$row['gallery'].'" id="inputgallery">';
}
else
{
    echo $row['gallery'];
?>

</div>