Bagaimana cara menyimpan opsi dropdown yang dipilih di html?

Question

Kotak Pilih HTML dibuat dengan daftar opsi, dan digunakan untuk membuat daftar dropdown dari opsi yang memungkinkan. Seorang pengguna mengklik dropdown pilih dan memilih salah satu opsi berdasarkan persyaratan. Kami juga dapat menggunakan banyak tag dengan tag pilih, yang memungkinkan pengguna memilih beberapa nilai dari daftar tarik-turun

Table of Contents Show

PHP 8 Dapatkan Nilai Terpilih Tunggal dari Kotak Pilih
Dapatkan Beberapa Nilai Terpilih dari Select Dropdown di PHP
Posting yang Direkomendasikan
Bagaimana cara menyimpan dropdown yang dipilih dalam HTML?
Bagaimana cara mempertahankan nilai dropdown yang dipilih setelah penyegaran HTML?
Bagaimana Anda mengikat nilai dropdown dalam HTML?
Bagaimana cara mempertahankan nilai dropdown yang dipilih dalam JavaScript?

<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 Dapatkan Nilai Terpilih Tunggal dari Kotak Pilih

Kami menggunakan $_POST_ untuk mendapatkan nilai opsi pilih jika nilai dipilih maka akan ditampilkan kepada pengguna jika tidak kami akan membuang pesan kesalahan

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

_

Kami menambahkan beberapa CSS untuk menambahkan gaya kustom untuk pilihan dropdown, Anda dapat melihat contoh kode lengkap di bawah ini

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

Pada langkah ini kita akan belajar dapatkah pengguna memilih beberapa nilai yang dipilih dari kotak opsi pilihan. Tambahkan beberapa tag dengan tag pilih juga tentukan array dengan properti nama

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

Pastikan array Fruits tidak kosong, jalankan foreach loop untuk mengulangi setiap nilai dropdown pilih. Tampilkan nilai yang dipilih jika tidak tampilkan pesan kesalahan kepada pengguna

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

_

Berikut adalah kode terakhir dari kotak multi pilih

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

Kesimpulan

Kami telah menyelesaikan tutorial PHP Select Option, dan dalam tutorial ini, kami belajar cara mendapatkan nilai kotak pilih tunggal atau ganda menggunakan PHP 8 dengan beberapa validasi dasar

Digamber

Saya Digamber, full-stack developer dan pecinta kebugaran. Saya membuat situs ini untuk memberikan pengalaman coding saya dengan programmer pemula. Saya suka menulis di JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Posting yang Direkomendasikan

Build PHP MySQL 5 Star Rating System menggunakan jQuery AJAXPHP 8 AJAX Live Data Search dengan MySQL TutorialPHP 8 Select2 Multi Select dengan jQuery AJAX TutorialPHP 8 JSON Data Encode and Decode ContohPHP 8 Server Side Form Validasi Tutorial ContohMengintegrasikan Google reCAPTCHA di PHP 8 Formulir KontakCara Membuat Captcha . Dapatkan Nilai yang Dipilih dan Tambahkan GayaDapatkan Beberapa Nilai dari Kotak Centang yang Dipilih di PHP 8Buat Paginasi di PHP 8 dengan MySQL dan BootstrapBangun Formulir Pendaftaran (Pendaftaran) Pengguna PHP 8 dengan MySQL

Atribut yang dipilih adalah atribut boolean. Bila ada, ini menentukan bahwa opsi harus dipilih sebelumnya saat halaman dimuat . Opsi yang dipilih sebelumnya akan ditampilkan terlebih dahulu dalam daftar drop-down. Tip. Atribut yang dipilih juga dapat diatur setelah halaman dimuat, dengan JavaScript.

Anda dapat menggunakan localStorage untuk menyimpan nilai yang dipilih. .

$('#mov_type'). on('change', function() { // Menyimpan nilai di localstorage localStorage. setItem("mov_type", $(ini). val());

$(dokumen). siap(fungsi() { jika ($('#mov_type'). panjang) { $('#mov_type'). .

jika (kinerja. navigasi. ketik == 1) { konsol

Berbagai cara untuk melakukan pengikatan .

Menggunakan @html. Model DropDownList. @Html. DropDownList("Mobiledropdown1", Model. Daftar Seluler).

Menggunakan @html. DropDownList dengan Viewbag. @Html. DropDownList("Mobiledropdown2", ViewBag. VBMobileList sebagai SelectList).

Menggunakan @html. DropDownListFor Dengan Model. .

Menggunakan @html

Dapatkan nilai yang dipilih dari daftar dropdown. Kita dapat menggunakan properti value dari kotak pilih untuk mendapatkan nilai yang dipilih dari daftar dropdown. Keluaran HTML. .

Dapatkan nilai dan teks yang dipilih dari daftar dropdown. Jika kita ingin mendapatkan teks opsi yang dipilih, maka kita harus menggunakan properti selectedIndex dari kotak pilih

kode html