How to limit char length in bootstrap live search - html

How to add maxlenght to bootstraps bs-searchbox.
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>
<div class="container">
<div class="row-fluid">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>


You are using an old version of bootstrap-select besides being vulnerable to various attacks it is quite out of date, updating it you can use the loading event and use maxlength for your purpose.
Example with maxlength = 6
$('.selectpicker').selectpicker().on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) {
$(this).parent().find('.dropdown-menu > .bs-searchbox > input').attr('maxlength','6');
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
</head>
<div class="container">
<div class="row-fluid">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
</html>

Related

Dropdown does not show values

I am trying to create a drop down with multi select options (don't look at the content, its for tests only).
I added css links:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
and scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
Dropdown looks like:
<select th:field="*{cars}" class="form-control selectpicker" multiple data-live-search="true">
<option value="" selected disabled>Choose Role</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br/>
but after run it looks like:
When I remove class attribute I am getting normal select with multiple option:

Be sure to implement your script tag for jQuery correct:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Then your code is running.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select th:field="*{cars}" class="form-control selectpicker" multiple data-live-search="true">
<option value="" selected disabled>Choose Role</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br/>

How to create a filter using bootstrap and jQuery

I have been trying to create a filter (image shown below) using bootstrap tabs and jQuery but I don't know how to get the value from the 2 select options and applying to the search button.
What I need is get the value from the 2 select boxes and apply that to the search button so that the content will be displayed below.
See the image below.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<select id="mySelect">
<option data-target="#home">2017</option>
<option data-target="#profile">2018</option>
<option data-target="#messages">2019</option>
<option data-target="#settings">2020</option>
</select>
<select id="month">
<option data-target="#home">Jan</option>
<option data-target="#profile">feb</option>
<option data-target="#messages">March</option>
<option data-target="#settings">April</option>
</select>
<button> search </button>
<div class="tab-content">
<div class="tab-pane active" id="home">
Div 1
</div>
<div class="tab-pane" id="profile">
Div 2
</div>
<div class="tab-pane" id="messages">
Div 3
</div>
<div class="tab-pane" id="settings">
Div 4
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script>
$('#mySelect').on('change', function(e) {
var $optionSelected = $("option:selected", this);
$optionSelected.tab('show')
});
$('#month').on('change', function(e) {
var $optionSelected = $("option:selected", this);
$optionSelected.tab('show')
});
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<select id="mySelect">
<option data-target="#home">2017</option>
<option data-target="#profile">2018</option>
<option data-target="#messages">2019</option>
<option data-target="#settings">2020</option>
</select>
<select id="month">
<option data-target="#home">Jan</option>
<option data-target="#profile">feb</option>
<option data-target="#messages">March</option>
<option data-target="#settings">April</option>
</select>
<button> search </button>
<div class="tab-content">
<div class="tab-pane active" id="home">
Div 1
</div>
<div class="tab-pane" id="profile">
Div 2
</div>
<div class="tab-pane" id="messages">
Div 3
</div>
<div class="tab-pane" id="settings">
Div 4
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script>
$('#mySelect').on('change', function(e) {
var $optionSelected = $("option:selected", this);
$optionSelected.tab('show')
});
$('#month').on('change', function(e) {
var $optionSelected = $("option:selected", this);
$optionSelected.tab('show')
});
$('button').click(function(){
$('.tab-pane').hide();
var year =$('select[id=mySelect] option').filter(':selected').attr('data-target');
var month =$('select[id=month] option').filter(':selected').attr('data-target');
//alert("year : "+year+" month: "+ month);
if(year!=undefined){
$(year).show();
}
if(month!=undefined){
$(month).show();
}
});
</script>
</body>
</html>

$('button[type="button"]').on('click', function(){
console.log($('select#mySelect').val());
console.log($('select#month').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option data-target="#home">2017</option>
<option data-target="#profile">2018</option>
<option data-target="#messages">2019</option>
<option data-target="#settings">2020</option>
</select>
<select id="month">
<option data-target="#home">Jan</option>
<option data-target="#profile">feb</option>
<option data-target="#messages">March</option>
<option data-target="#settings">April</option>
</select>
<button type="button">Get value</button>

Change text of label on changing of select box option using jquery?

I have a select box with multiple option and I want to change the other label text on the base of select box option. I have 3 value for label WEIGHT(KG)/CARGO VALUE/NO. OF SHIPMENT and I am using jquery to changing label text, but only WEIGHT(KG) and CARGO VALUE is changing not the NO. OF SHIPMENT.
and here is the condition to change label text.
If Commodity is Ecommerce then label text will be WEIGHT(KG).
If Commodity is Machinery or Electronics then label text will be CARGO VALUE.
and rest for all option label text will be NO. OF SHIPMENT.
Please help.
$(function() {
$('#commoditySelect').change(function() {
if ($('#commoditySelect').val() == 'Ecommerce') {
$('#commodityLabel').text('WEIGHT (KG)');
} else if ($('#commoditySelect').val() == 'Machinery' || 'Electronics') {
$('#commodityLabel').text('CARGO VALUE');
} else {
$('#commodityLabel').text('NO. OF SHIPMENT');
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6">
<label>COMMODITY</label>
<select class="form-control" id="commoditySelect">
<option value="Ecommerce">E-Commerce</option>
<option value="Machinery">Machinery</option>
<option value="Plastics">Plastics</option>
<option value="Clothing & Textile">Clothing & Textile</option>
<option value="Eyewear">Eyewear</option>
<option value="Electronics">Electronics</option>
<option value="Personal Effects">Personal Effects</option>
<option value="Automobile Spares">Automobile Spares</option>
<option value="Food Products">Food Products</option>
<option value="Livestock Feed">Livestock Feed</option>
<option value="Cosmetics">Cosmetics</option>
<option value="Chemicals">Chemicals</option>
<option value="Pharmaceutical Products">Pharmaceutical Products</option>
<option value="Fertilizer">Fertilizer</option>
<option value="Rubber">Rubber</option>
<option value="Wood">Wood</option>
<option value="Paper">Paper</option>
<option value="Printed Material">Printed Material</option>
<option value="Scrap">Scrap</option>
<option value="Footwear">Footwear</option>
<option value="Cement">Cement</option>
<option value="Ceramic">Ceramic</option>
<option value="Glass">Glass</option>
<option value="Metals">Metals</option>
<option value="General Cargo">General Cargo</option>
</select>
</div>
<div class="col-6">
<label id="commodityLabel">WEIGHT (KG)</label>
<input type="text" class="form-control" placeholder="Default Input" />
</div>
</div>
</div>

You need to define the || in the elseif like this => $(this).val() == 'Electronics' for the last else to trigger so that the label is change to NO. OF SHIPMENT if no condition matches.
Also, instead of using #commoditySelect again and again you can simply use $(this)
$(this) refers to the element where the change event is occurring
Live Working Demo:
$(function() {
$('#commoditySelect').change(function() {
if ($(this).val() == 'Ecommerce') {
$('#commodityLabel').text('WEIGHT (KG)');
} else if ($(this).val() == 'Machinery' || $(this).val() == 'Electronics') {
$('#commodityLabel').text('CARGO VALUE');
} else {
$('#commodityLabel').text('NO. OF SHIPMENT');
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6">
<label>COMMODITY</label>
<select class="form-control" id="commoditySelect">
<option value="Ecommerce">E-Commerce</option>
<option value="Machinery">Machinery</option>
<option value="Plastics">Plastics</option>
<option value="Clothing & Textile">Clothing & Textile</option>
<option value="Eyewear">Eyewear</option>
<option value="Electronics">Electronics</option>
<option value="Personal Effects">Personal Effects</option>
<option value="Automobile Spares">Automobile Spares</option>
<option value="Food Products">Food Products</option>
<option value="Livestock Feed">Livestock Feed</option>
<option value="Cosmetics">Cosmetics</option>
<option value="Chemicals">Chemicals</option>
<option value="Pharmaceutical Products">Pharmaceutical Products</option>
<option value="Fertilizer">Fertilizer</option>
<option value="Rubber">Rubber</option>
<option value="Wood">Wood</option>
<option value="Paper">Paper</option>
<option value="Printed Material">Printed Material</option>
<option value="Scrap">Scrap</option>
<option value="Footwear">Footwear</option>
<option value="Cement">Cement</option>
<option value="Ceramic">Ceramic</option>
<option value="Glass">Glass</option>
<option value="Metals">Metals</option>
<option value="General Cargo">General Cargo</option>
</select>
</div>
<div class="col-6">
<label id="commodityLabel">WEIGHT (KG)</label>
<input type="text" class="form-control" placeholder="Default Input" />
</div>
</div>
</div>

There is a mistake in your jQuery code in the second if statement. You need to check the conditioning after the || too. Here is the working code in my CodePen https://codepen.io/TheLazyPanda/pen/ZEWajVO .
$(function() {
$('#commoditySelect').change(function() {
if ($('#commoditySelect').val() === 'Ecommerce') {
$('#commodityLabel').text('WEIGHT (KG)');
} else if ($('#commoditySelect').val() === 'Machinery' || $('#commoditySelect').val() === 'Electronics') {
$('#commodityLabel').text('CARGO VALUE');
} else {
$('#commodityLabel').text('NO. OF SHIPMENT');
}
});
});

This version does the same thing:
$('#commoditySelect').change(function() {
const labels={Ecommerce:'WEIGHT (KG)',Machinery:'CARGO VALUE',Electronics:'CARGO VALUE'};
$('#commodityLabel').text(labels[$(this).val()] || 'NO. OF SHIPMENT');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-6">
<label>COMMODITY</label>
<select class="form-control" id="commoditySelect">
<option value="Ecommerce">E-Commerce</option>
<option value="Machinery">Machinery</option>
<option value="Plastics">Plastics</option>
<option value="Clothing & Textile">Clothing & Textile</option>
<option value="Eyewear">Eyewear</option>
<option value="Electronics">Electronics</option>
<option value="Personal Effects">Personal Effects</option>
<option value="Automobile Spares">Automobile Spares</option>
<option value="Food Products">Food Products</option>
<option value="Livestock Feed">Livestock Feed</option>
<option value="Cosmetics">Cosmetics</option>
<option value="Chemicals">Chemicals</option>
<option value="Pharmaceutical Products">Pharmaceutical Products</option>
<option value="Fertilizer">Fertilizer</option>
<option value="Rubber">Rubber</option>
<option value="Wood">Wood</option>
<option value="Paper">Paper</option>
<option value="Printed Material">Printed Material</option>
<option value="Scrap">Scrap</option>
<option value="Footwear">Footwear</option>
<option value="Cement">Cement</option>
<option value="Ceramic">Ceramic</option>
<option value="Glass">Glass</option>
<option value="Metals">Metals</option>
<option value="General Cargo">General Cargo</option>
</select>
</div>
<div class="col-6">
<label id="commodityLabel">WEIGHT (KG)</label>
<input type="text" class="form-control" placeholder="Default Input" />
</div>
</div>
</div>

How to create a form that consist of a field option YEAR only?

I need to create a filter form which only shows year option. The input can be be a dropdown list of year or datepicker that only shows year option.
Do you know how to create it? please let me know, I am a beginner,
I have tried to find solution, but didn't find any.
Thank you, I appreciate any helps.

Thanks #Reystleen for answer in the comment!
ANSWER: https://itsolutionstuff.com/post/bootstrap-year-picker-example-using-datepicker-jsexample.html
CODE:
<html lang="en">
<head>
<title>Bootstrap - year picker only example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container text-center">
<h2>Bootstrap - year picker only example</h2>
<input class="date-own form-control" style="width: 300px;" type="text">
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</body>
</html>

Something like this:
<select name="birthyear">
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
etc.
</select>

Materialize CSS select statement not showing

Although this question has already been asked in this thread:
Materialize CSS - Select Doesn't Seem to Render
I'm having problems with where to place this code:
$(document).ready(function() {
$('select').material_select();
});
At the moment, the most logical thing I can think of is to place it like so:
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js">
$(document).ready(function() {
$('select').material_select();
});
</script>
<div class="input-field col s12">
<select>
<option value="" disabled 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>Materialize Select</label>
</div>
</body>
I've tried changing the "document" to the name of my document, in this case "index", but it still doesn't work.
Am I just being slow?
Thanks in advance.

Try this:
<body>
<div class="input-field col s12">
<select>
<option value="" disabled 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>Materialize Select</label>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>

You need use a class "browser-default" to show the select combo. Like this:
<select name="name" class="browser-default"><option>- options -</option></select>

i had same problem in 2019, these answers helped, but a little update cause of the Materialize version upgraded
M's select and form are better than browser-default one:)
now the initialization code is changed to
$(document).ready(function(){
$('select').formSelect();
});
https://materializecss.com/select.html

You need to initialise the select element as shown here :
https://materializecss.com/select.html#initialization
$(document).ready(function(){
$('select').formSelect();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s12">
<select multiple>
<option value="" disabled 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>Materialize Multiple Select</label>
</div>

this work for me. The main change is the version, not use 1.0.0. then use 0.97.2
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
<?!= include("Planificacion-js");?>
</body>