如何在 PHP 中获取选定的选项值


在本文中,我们将了解如何在 PHP 中获取选定的选项值,并附带必要的示例。

什么是 PHP 中的“选项值”?

下拉菜单是使用 <select> 和 <option 标签> 创建的。PHP 允许用户从列表中选择一个或多个选项。

语法

以下是 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>  

<select> 标签相关的特性包括:

  • Multiple: 用于从列表中选择多个选项。
  • Name: 指定下拉列表的名称。

<option> 标签一起使用的特性包括:

  • Value: 指定提交表单时发送的值。
  • Selected: 用于指定表单首次在浏览器中加载时预选的选项。

让我们看看如何在 PHP 中获取选定选项值的几个不同示例:

示例 1

这是一个示例,展示如何在 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>  

输出

以下是以下代码的结果:

此代码生成一个基本的网页,其中包含一个下拉菜单,允许用户从列表中选择一部电影。选择一部电影并点击提交后,所选电影的标题就会显示出来。如果用户没有选择电影,则会显示一条错误消息,要求用户选择电影。

示例 2

现在我们将编写一个 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 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>

输出

这将生成以下输出:

此代码使用 HTML 和 PHP 创建了一个多选下拉表单,允许用户选择多个科目并提交他们的选择。提交后,页面上将使用 PHP 显示选定的科目,如果没有选择任何选项,则会显示一条错误消息。它具有下拉菜单和按钮,旨在易于使用。

更新于: 2024-11-22

1 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告