PHP Tutorials

How to Get Selected Values from Select Option in PHP 8

This tutorial explains to you how to get single and multiple selected values from the select option or select dropdown list in PHP 8. We will also learn to add custom styling in select dropdown using HTML and CSS.

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

Create Select Box with Options

The HTML Select box is created with an option list, and it is used to create a dropdown list of possible options. A user clicks on the select dropdown and chooses one of the options based on the requirement. We can also use multiple tags with the select tag, which lets users select multiple values from the dropdown 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

We used $_POST to get the select option value if the value is selected it will be displayed to user else we will throw the error message.

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

In this step we will learn can a user select multiple selected values from a select options box. Add the multiple tag with select tag also define array with name property.

<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

We have completed PHP Select Option tutorial, and in this tutorial, we learned how to get single or multiple select box values using PHP 8 with some basic validation.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Display Validation Error Messages with Hook Form Tutorial

As a React developer, you must know how to implement validation in form, and a…

2 days ago

React Hook Form 7 Required Checkbox Validation Tutorial

Creating checkboxes in React is not so difficult, especially when you are using React Hook…

5 days ago

React Hook Form 7 Custom Radio Buttons Tutorial

Learning React is not complicated; instead, it's easy, but only when you have the right…

1 week ago

React Bootstrap Custom Dropdown List with Fetch API Tutorial

Dropdown is a valuable and prominent module, which is often used to select one option…

2 weeks ago

React Hook Form Reset / Clear Form Values and Errors Tutorial

React form reset tutorial; Forms are handy provides the best possible way to get information…

2 weeks ago

React Show Loading Spinner on Submit Click Tutorial

You click on the submit button, form is processed, but nothing is being shown to…

2 weeks ago