Topic: SELECT Placeholder without multiple attribute
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>
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- 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