trying to have one choice selected in each drop down

Question

I have a table created in html/php. In the left most cells I have to have a dropdown with various colors. My question is how do I make It so that when a user selects a color in the dropdown, and they try to select It in another one It will not allow them to choose the same color. I also have to alert the user in a non-intrusive way that no color can be chosen more than once.

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h1>Color Coordinate Generation</h1>
    <?php
      $rowcol = $_GET["rowcol"];
      
      $numColor = $_GET["numColor"];
      
      echo "<table style='width:80%'>";
      
      for($i = 0; $i < $numColor; $i++) {
      
        echo "
      
          <tr>
      
          <td style = 'width: 20%'><label for='color'></label>";
      
      ?>
    <select name="color" id="color">
      <option value='red'>Red</option>
      <option value='orange'>Orange</option>
      <option value='yellow'>Yellow</option>
      <option value='green'>Green</option>
      <option value='blue'>Blue</option>
      <option value='purple'>Purple</option>
      <option value='grey'>Grey</option>
      <option value='brown'>Brown</option>
      <option value='black'>Black</option>
      <option value='teal'>Teal</option>
    </select>
    <?php
      echo "</td>
      
      <td style = 'width: 80%'> hi</td>
      
      </tr>";
      
      }
      
      echo "
      
      </table>";
      
      ?>
    <br>
    <br>
    <?php
      $alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
      
      echo "<table style='width:100%'>";
      
      echo "<td> </td>";
      
      for($i = 0; $i < $rowcol; $i++) {
      
      echo "
      
      <td style = 'width: 2%'>";
      
      echo $alphabet[$i];
      
      }
      
      echo "</td>";
      
      for($i = 1; $i <= $rowcol; $i++) {
      
      echo "<tr>
      
      <td style = 'width: 2%'>";
      
      echo $i;
      
      }
      
      echo "</td></tr>";
      
      ?>
  </body>
</html>

`how do I make It so that when a user selects a color in the dropdown, and they try to select It in another one` ...did you forget to finish this sentence? — ADyson, Mar 24 '21 at 15:47
I think It got deleted in an edit. but I finished the sentence! thank you — Brad McCallister, Mar 24 '21 at 15:54
Ok thanks. The answer is "use javascript to check the contents of each dropdown whenever one of them changes, and make sure the values don't match" — ADyson, Mar 24 '21 at 16:03

score 0 · Answer 1 · answered Mar 24 '21 at 16:14

PHP should not (and cannot) be involved in users interactions with their browsers. When someone selects a color from a drop-down, it is JavaScript's duty to remove the chosen element from other drop-downs. It's a straight-forward JS code and you should be able to write it with a little search.

There remains the matter of validating the form after submission (if there's any). That's when PHP should play its role. First of all you have to change the name attribute of the select element to colors[], so PHP would be given the selected results in an array. Then you should check for duplicate values inside the array (also very straight-forward code), if there were any duplicates, throw an exception and inform the user, if not, then you're good to go.

Hope it can show you the right path to solve your problem.

_{P.S: Boy! Haven't seen such code in a long time!}

trying to have one choice selected in each drop down

1 Answers1