How to get selected option value in PHP

In this article, we will learn how to get selected option values in PHP. In this, we will learn some basic PHP concepts, and after that, we learn this concept with the help of various examples.

What do you mean by PHP?

PHP is a widely used, open-source server-side scripting language that allows web developers to quickly create dynamic and interactive web pages. PHP files have extensions with .php. PHP is compatible with almost all types of web servers on almost every operating system free of cost.

What do you mean by option value in PHP?

The <select> and <option tags> are used to create drop-down menus. They allow the user to select single or multiple choices from a list of options in PHP.

Syntax:

<select name = "select_list_name" size ="n" multiple>
<option value ="choice-name 1" selected> Text Label-1 </option>
<option value ="choice-name 2" selected> Text Label-2 </option>
........................................
........................................
</select>

The various attributes used with the <select> tag are:

Multiple: It is used to select the multiple options in the list.
Name: It is used to specify a name for the drop-down list.

The various attributes used with <option> tag are:

Value: It is used to specify the value that is sent when the form is submitted.
Selected: It is used to specify the preselected choice when the form is initially loaded in a browser.

Let's take various examples of how to get selected option values in PHP.

Example 1:

Write a Program on how to get selected option value 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 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;
    }
      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 {
      color: #000000;
      background-color: white;
    }
select:focus {
      color: #000000;
      background-color: white;
    }
    select:hover~.selectIcon
     {
      background-color: white;
    }
    select:focus~.selectIcon {
      background-color: white;
    }
    select:hover~.selectIcon svg.icon
    {
      fill: #1A33FF;
    }
  select:focus~.selectIcon svg.icon {
      fill: #1A33FF;
    }
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing:1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
input[type=submit]::before,
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
  </style>
</head>
<body>
  <div class="container mt-5">
  <h1> Example </h1>
  <h2> PHP Select Dropdown Example </h2>
    <form action="" method="post">
      <select name="Movies">
        <option value = "" selected> Select option </option>
        <option value = "harry_potter" > Harry Potter </option>
        <option value = "bonnie_clyde" > Bonnie and Clyde </option>
        <option value = "reservoir_dogs" > Reservoir Dogs </option>
        <option value = "don" > Don </option>
        <option value = ?anaconda"> Anaconda </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>
      <br> <br> <input type = "submit" name = "submit" value = "Select Movie">
    </form>
    <?php
        if(isset($_POST['submit'])){
        if(!empty($_POST['Movies'])) {
            $selected = $_POST['Movies'];
            echo 'You have chosen: ' . $selected;
        } else {
            echo 'Please select the value.';
        }
        }
    ?>
  </div>
</body>
</html>

Explanation:

In the above example, we have created an option value list with the help of <select> and <option> tag. In this, we have selected an option value from the option value list, and after selecting the option, we click on a button then the following message is displayed with the selected option.

If you have not selected the option value, the following message is displayed.

Output:

The following figure shows the output of this example:

Example 2:

Write a Program on how to get selected multiple option values from a drop-down 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>
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; letter-spacing: -0.005em; word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
    .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;
    }
    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 {
      color: #000000;
      background-color: white;
    }
    select:focus {
      color: #000000;
      background-color: white;
    }	
    select:hover~.selectIcon
    {
      background-color: white;
    }
    select:focus~.selectIcon {
      background-color: white;
    }
    select:hover~.selectIcon svg.icon
    {
      fill: #1A33FF;
    }
    select:focus~.selectIcon svg.icon {
      fill: #1A33FF;
    }
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
input[type=submit]::before,
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
  </style>
</head>
<body>
  <div class="container mt-5">
<h1> Example </h1>
  <h2> PHP Select Multi Dropdown Example </h2>
    <form method = 'post'>         
            <select name = 'subject[]' multiple size = 6>   
			  <option value = 'computer_networks'> COMPUTER Networks </option> 
			   <option value = 'automata'> Theory of Computation </option> 
                <option value = 'english'> ENGLISH </option> 
                <option value = 'mathematics'> MATHEMATICS </option> 
                 <option value = 'complier_design'> Complier Design </option> 
                <option value = 'haddop'> Haddop </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' value = "Select Subject"> 
    </form>
    <?php
         if(isset($_POST["submit"]))  
         { 
        if(isset($_POST["subject"]))  
        { 
            foreach ($_POST['subject'] as $subject)  
                print "You have selected $subject<br/>"; 
        } 
    else
        echo "Select an option first !!"; 
    } 
      ?>
  </div>
</body>
</html>

Explanation:

In the above example, we have created an option value list with the help of <select> and <option> tag. In this, we have the option of selecting more than one value from the options list using the "multiple option." After selecting the option, we click on a button then the following message is displayed with the selected option.

If you have not selected the option value, the following message is displayed.

Output:

The following figure shows the output of this example: