How to Get Selected Values from Select Option in PHP 8

Last Updated on by in PHP
This tutorial explains how to get single and multiple selected values from the select option or select dropdown list in PHP 8.PHP Select Dropdown example: Select dropdown is a primary HTML element used to set and get values as an option in an options list. You can select a single value or multiple values from the select box.

In this simple PHP HTML select example, we will show you how to create a select dropdown using HTML and how to implement a select box in PHP. Furthermore, we will also learn how to display a selected option value in a select drop-down list and how to selected values from a select drop-down in PHP.

On the other hand, we will go over the process of adding custom styling in select dropdown using HTML and CSS.

PHP Select Option

Please also check out our previous tutorial on Getting Multiple Checkboxes Values in PHP.

Create Select Box with Options

We created the HTML select box using an option list. You can now click on the select dropdown and select an option from the options list.

To select multiple options from the select list, use the given code example. It allows users to select multiple values from the fruits option list.

<form action="" method="post">
    <select name="Fruit">
        <option value="" disabled selected>Choose option</option>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Coconut">Coconut</option>
        <option value="Blueberry">Blueberry</option>
        <option value="Strawberry">Strawberry</option>
    </select>

    <input type="submit" name="submit" vlaue="Choose options">
</form>

PHP 8 Get Single Selected Values of Select Box

The following code snippet uses the $_POST variable to get the option values from the select when the value is selected in the select dropdown. In addition, it will throw an error or show an error message when no value is selected.

<?php
    if(isset($_POST['submit'])){
    if(!empty($_POST['Fruit'])) {
        $selected = $_POST['Fruit'];
        echo 'You have chosen: ' . $selected;
    } else {
        echo 'Please select the value.';
    }
    }
?>

We added some CSS to add custom styling for select dropdown, You can check out the full code example below.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Select Dropdown Example in PHP</title>
  <style>
    .container {
      max-width: 350px;
      margin: 50px auto;
      text-align: center;
    }

    input[type="submit"] {
      margin-bottom: 20px;
    }

    .select-block {
      width: 300px;
      margin: 110px auto 30px;
      position: relative;
    }

    select {
      width: 100%;
      height: 50px;
      font-size: 100%;
      font-weight: bold;
      cursor: pointer;
      border-radius: 0;
      background-color: #1A33FF;
      border: none;
      border: 2px solid #1A33FF;
      border-radius: 4px;
      color: white;
      appearance: none;
      padding: 8px 38px 10px 18px;
      -webkit-appearance: none;
      -moz-appearance: none;
      transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
    }

    /* For IE <= 11 */
    select::-ms-expand {
      display: none;
    }

    .selectIcon {
      top: 7px;
      right: 15px;
      width: 30px;
      height: 36px;
      padding-left: 5px;
      pointer-events: none;
      position: absolute;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .selectIcon svg.icon {
      transition: fill 0.3s ease;
      fill: white;
    }

    select:hover,
    select:focus {
      color: #000000;
      background-color: white;
    }

    select:hover~.selectIcon,
    select:focus~.selectIcon {
      background-color: white;
    }

    select:hover~.selectIcon svg.icon,
    select:focus~.selectIcon svg.icon {
      fill: #1A33FF;
    }
  </style>
</head>

<body>

  <div class="container mt-5">
    <form action="" method="post" class="mb-3">
      <div class="select-block">
        <select name="Fruit">
          <option value="" disabled selected>Choose option</option>
          <option value="Apple">Apple</option>
          <option value="Banana">Banana</option>
          <option value="Coconut">Coconut</option>
          <option value="Blueberry">Blueberry</option>
          <option value="Strawberry">Strawberry</option>
        </select>
        <div class="selectIcon">
          <svg focusable="false" viewBox="0 0 104 128" width="25" height="35" class="icon">
            <path d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z"></path>
          </svg>
        </div>
      </div>

      <input type="submit" name="submit" vlaue="Choose options">
    </form>

    <?php
      if(isset($_POST['submit'])){
        if(!empty($_POST['Fruit'])) {
          $selected = $_POST['Fruit'];
          echo 'You have chosen: ' . $selected;
        } else {
          echo 'Please select the value.';
        }
      }
    ?>
  </div>

</body>

</html>

Get Multiple Selected Values of Select Dropdown in PHP

To select multi-option values: Add the multiple tag to the HTML select component, and also add the name property along with the Fruit[] array.

<select name="Fruits[]" multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Coconut">Coconut</option>
  <option value="Blueberry">Blueberry</option>
  <option value="Strawberry">Strawberry</option>
</select>

Make sure the Fruits array is not empty, run a foreach loop to iterate over every value of the select dropdown. Display the selected values else show the error message to the user.

<?php
  if(isset($_POST['submit'])){
    if(!empty($_POST['Fruits'])) {
      foreach($_POST['Fruits'] as $selected){
        echo '  ' . $selected;
      }          
    } else {
      echo 'Please select the value.';
    }
  }
?>

Here is the final code of multi select box.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Multiple Select Dropdown in PHP</title>
  <style>
    .container {
      max-width: 350px;
      margin: 50px auto;
      text-align: center;
    }
    select {
      width: 100%;
      min-height: 150px;
      margin-bottom: 20px;
    }

    input[type="submit"] {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>

  <div class="container mt-5">
    <form action="" method="post" class="mb-3">
        <select name="Fruits[]" multiple>
          <option value="" disabled selected>Choose option</option>
          <option value="Apple">Apple</option>
          <option value="Banana">Banana</option>
          <option value="Coconut">Coconut</option>
          <option value="Blueberry">Blueberry</option>
          <option value="Strawberry">Strawberry</option>
        </select>

        <input type="submit" name="submit" vlaue="Choose options">
    </form>

    <?php
      if(isset($_POST['submit'])){
        if(!empty($_POST['Fruits'])) {
          foreach($_POST['Fruits'] as $selected){
            echo '  ' . $selected;
          }          
        } else {
          echo 'Please select the value.';
        }
      }
    ?>
  </div>

</body>

</html>

Conclusion

In this tutorial, we went over a series of steps on how to get selected values from the Select dropdown using PHP. Additionally, we have also learned how to add validation in select dropdown with PHP.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.