How to Set & Get Selected Value of Select Option in PHP 7 Form.

In this tutorial we will learn how to work with select dropdown with PHP 7 app. We will understand how to set & get selected values of Select Option (Select Drop-down) in PHP 7 Form.

How to Set & Get Selected Value of Select Option in PHP 7 Form.

We will learn how to get single and multiple selected values from the select options list using PHP 7 programming language.

Also, we will check how to comfortable style the select dropdown using HTML and CSS.

Select Dropdown with Options

The select tag allows creating a drop-down list consist of data values. It is mainly an HTML Form element.

It is supported by all the main browsers such as Firefox, Chrome, Safari, IE, and Opera.

Each drop-down list item is referred to as an ID attribute.

The option tag generates the drop-down list within a select item.

<form action="" method="post">
  <select name="Movies">
      <option value="" disabled selected>Select option</option>
      <option value="seven_samurai">The Seven Samurai</option>
      <option value="bonnie_clyde">Bonnie and Clyde</option>
      <option value="reservoir_dogs">Reservoir Dogs</option>
      <option value="airplane">Airplane</option>
      <option value="deer_hunter">The Deer Hunter</option>
  </select>

  <input type="submit" name="submit" vlaue="Select Movie">
</form>

Get Single Selected Value

The $_POST method is helping here to get the select dropdown’s option value.

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

Add Styling

To add a simple style, we need to place some CSS. It will give your select dropdown a fresh look.

.container {
      max-width: 400px;
      margin: 60px auto;
      text-align: center;
    }

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

    .select-block {
      width: 350px;
      margin: 100px auto 40px;
      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;
    }

Here is the final code for PHP 7 elect Dropdown Example that you have to conjugate at one place.

<!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>PHP Select Dropdown Example</title>
  <style>
    .container {
      max-width: 400px;
      margin: 60px auto;
      text-align: center;
    }

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

    .select-block {
      width: 350px;
      margin: 100px auto 40px;
      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">
      <select name="Movies">
        <option value="" disabled selected>Select option</option>
        <option value="seven_samurai">The Seven Samurai</option>
        <option value="bonnie_clyde">Bonnie and Clyde</option>
        <option value="reservoir_dogs">Reservoir Dogs</option>
        <option value="airplane">Airplane</option>
        <option value="deer_hunter">The Deer Hunter</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>

      <input type="submit" name="submit" vlaue="Select Movie">
    </form>

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

</body>

</html>

Get Multiple Selected Values

You can easily get the multiple selected values of a HTML select dropdown with PHP methods.

Declare an array and multiple tag with select drop-down HTML tag.

<select name="Movies[]" multiple>
  ...
  ...
  ...
</select>

We have set the Movies array, with the help of a loop, iterate each value within the dropdown.

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

Source Code for PHP Multi Select Dropdown

This is the final source code of multi select box this will help you display multiple selected value of dropdown list in PHP.

<!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>PHP 7 Multi Select Dropdown List Example</title>
  <style>
    .container {
      max-width: 400px;
      margin: 60px auto;
      text-align: center;
    }

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

    .select-block {
      width: 350px;
      margin: 100px auto 40px;
      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">
      <select name="Movies[]" multiple>
        <option value="" disabled selected>Select option</option>
        <option value="seven_samurai">The Seven Samurai</option>
        <option value="bonnie_clyde">Bonnie and Clyde</option>
        <option value="reservoir_dogs">Reservoir Dogs</option>
        <option value="airplane">Airplane</option>
        <option value="deer_hunter">The Deer Hunter</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>

      <input type="submit" name="submit" vlaue="Select Movies">
    </form>

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

</body>

</html>

I hope you will like this tutorial and do share with others.