Topic: Select dropdown not working
Select dropdown not working. The code I have attached is directly from your documentation and works just as it is, but not properly. The problem with the code for me is the pathing for the links and script. For example, your code says
<link href="../css/mdb.min.css" rel="stylesheet">
this is the default path and it works. But when I add my true path, for example
<link href="https://my_website/css/mdb.min.css" rel="stylesheet">
I do this for all the links and script. The dropdown does not appear!!
I am confident that I have MDB installed properly as so many of your other code examples I use work just fine
<!DOCTYPE html>
<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 Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="../css/style.css" rel="stylesheet">
<script>
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<select class="mdb-select md-form mb-0" id="select" aria-label="select input desc">
<option value="" selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label class="ml-3" for="select">Material select</label>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
</body>
</html>
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.5.15
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No
Tags
Related topics
rt133813 pro commented 2 years ago
I added the following and it worked. I missed this in the documentation: