Topic: SELECT Placeholder without multiple attribute

szaiftamas pro asked 1 year ago


I want to use data-mdb-placeholder on SELECT. It doesn't work without the multiple attribute.

<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Material Design for Bootstrap</title>
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
      <!-- MDB -->
      <link rel="stylesheet" href="../mdb5/css/mdb.min.css" />
  </head>
  <body>
      <select class="select" data-mdb-placeholder="Example placeholder">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
      </select>
  </div>
      <!-- MDB -->
      <script type="text/javascript" src="../mdb5/js/mdb.min.js"></script>
  </body>
</html>

enter image description here


Dawid Wajszczuk staff answered 1 year ago


Hi,

Try adding <option value="" hidden></option> as first option. Single Select displays first option (if it has value) by default instead of placeholder. But if you provide option without the value, the placeholder will be displayed. Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3290625.

Keep coding,
Dawid



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: N/A
  • Browser: Firefox
  • OS: Ubuntu 20.04
  • Provided sample code: No
  • Provided link: No