Get Selected Option Value in PHP



In this article, we will see how to get selected option values in PHP, with necessary examples.

What is "option value" in PHP?

Drop-down menus are created by using the <select> and <option tags>. PHP allows users to select one or more options from a list.

Syntax

Below is the syntax of the Option Value in PHP ?

<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 characteristics related with the <select> tag are ?

  • Multiple: This is used to choose multiple choices from a list.
  • Name: It specifies the name of the drop-down list.

The characteristics used with the <option> tag are ?

  • Value: It specifies the value sent when the form is submitted.
  • Selected: It is used to specify the pre-selected option when the form is first loaded in a browser.

Let us see different examples of how to get selected option values in PHP -

Example 1

Here is an example to show how to get selected option values 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 Dropdown Selection</title>  
  <style>  
    .wrapper {  
      max-width: 450px;  
      margin: 70px auto;  
      text-align: center;  
    }  
    input[type="submit"] {  
      margin-bottom: 20px;  
    }  
    .dropdown-container {  
      width: 370px;  
      margin: 90px auto 30px;  
      position: relative;  
    }  
    select {  
      width: 100%;  
      height: 55px;  
      font-size: 16px;  
      font-weight: bold;  
      cursor: pointer;  
      border-radius: 5px;  
      background-color: #ff5733;  
      border: none;  
      color: white;  
      padding: 10px 40px 12px 15px;  
      appearance: none;  
      transition: color 0.3s ease, background-color 0.3s ease;  
    }  
    select:hover {  
      color: #333;  
      background-color: #fff;  
    }  
    select:focus {  
      color: #333;  
      background-color: #fff;  
    }  
    h2 {  
      font-style: italic;  
      font-family: "Georgia", serif;  
      color: #666;   
      font-size: 1.8em;  
      font-weight: bold;  
    }  
    h1 {  
      font-family: "Georgia", serif;  
      color: #444;   
      font-size: 2.5em;  
      font-weight: bold;  
    }  
    input[type=submit] {  
      border: 2px solid #ff5733;  
      border-radius: 5px;  
      background-color: #fff;  
      color: #ff5733;  
      font-size: 14px;  
      font-weight: bold;  
      padding: 10px 30px;  
      cursor: pointer;  
      transition: all 0.3s ease;  
    }  
    input[type=submit]:hover {  
      background-color: #ff5733;  
      color: white;  
    }  
  </style>  
</head>  
<body>  
  <div class="wrapper">  
    <h1>Movie Picker</h1>  
    <h2>Select Your Favorite Movie</h2>  
    <form action="" method="post">  
      <select name="movieList">  
        <option value="" selected>Choose a movie</option>  
        <option value="inception">Inception</option>  
        <option value="titanic">Titanic</option>  
        <option value="interstellar">Interstellar</option>  
        <option value="gladiator">Gladiator</option>  
        <option value="avatar">Avatar</option>  
      </select>  
      <br><br>  
      <input type="submit" name="submitButton" value="Submit">  
    </form>  
    <?php  
      if (isset($_POST['submitButton'])) {  
        if (!empty($_POST['movieList'])) {  
          $chosenMovie = $_POST['movieList'];  
          echo '<p>You selected: <strong>' . ucfirst($chosenMovie) . '</strong></p>';  
        } else {  
          echo '<p style="color: red;">Please select a movie from the list.</p>';  
        }  
      }  
    ?>  
  </div>  
</body>  
</html>  

Output

Here is the outcome of the following code -

This code generates a basic webpage with a dropdown menu that allows users to choose a movie from a list. After selecting a movie and clicking Submit so the title of the chosen movie appears. It displays an error message requesting that you select a movie if you don't.

Example 2

Now we will write a PHP code on how to get selected multiple option values from a drop-down list.

<!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 Multi-Select Dropdown Example</title>
   <style>
   h2 {
      font-family: Arial, sans-serif;
      color: #555;
      font-size: 1.5em;
      margin-bottom: 15px;
   }
   h1 {
      font-family: Arial, sans-serif;
      color: #333;
      font-size: 2.5em;
      margin-bottom: 10px;
   }.container {
      max-width: 500px;
      margin: 50px auto;
      text-align: center;
   }.dropdown-container {
      margin: 20px 0;
    }
    select {
      width: 100%;
      height: 150px;
      font-size: 14px;
      font-family: Arial, sans-serif;
      border: 1px solid #888;
      border-radius: 5px;
      padding: 10px;
      background-color: #f8f9fa;
      color: #333;
      cursor: pointer;
    }
    select:hover {
      border-color: #007bff;
    }
    select:focus {
      outline: none;
      border-color: #007bff;
      background-color: #fff;
    }
    input[type="submit"] {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      font-family: Arial, sans-serif;
      border-radius: 5px;
      cursor: pointer;
    }
    input[type="submit"]:hover {
      background-color: #0056b3;
    }
    .message {
      font-family: Arial, sans-serif;
      color: #333;
      margin-top: 20px;
      font-size: 16px;
    }
    .message.error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Subject Selector</h1>
    <h2>Select Your Subjects</h2>
    <form method="post">
      <div class="dropdown-container">
        <select name="subjectChoices[]" multiple size="6">
          <option value="data_structures">Data Structures</option>
          <option value="operating_systems">Operating Systems</option>
          <option value="physics">Physics</option>
          <option value="calculus">Calculus</option>
          <option value="ai">Artificial Intelligence</option>
          <option value="ml">Machine Learning</option>
        </select>
      </div>
      <input type="submit" name="submitButton" value="Submit">
    </form>
    <?php
      if (isset($_POST["submitButton"])) {
        if (isset($_POST["subjectChoices"])) {
          echo '<div class="message">';
          foreach ($_POST['subjectChoices'] as $selectedSubject) {
            echo "You selected: " . ucfirst(str_replace("_", " ", $selectedSubject)) . "<br/>";
          }
          echo '</div>';
        } else {
          echo '<div class="message error">Please select at least one subject!</div>';
        }
      }
    ?>
  </div>
</body>
</html>

Output

This will generate the below output ?

This code creates a multi-select drop-down form with HTML and PHP that lets users select multiple subjects and submit their choices. The selected subjects are shown on the page using PHP after submission, if no choice is selected an error message is shown. It features drop-down menus and buttons that are designed to be easy to use.

Updated on: 2024-11-22T14:20:12+05:30

300 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements