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/>
Related
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>
I am trying to create a menu with data-subtext, I have seen some suggestions around on stackoverflow but I cannot get the menu to work. The problem is that the menu doesn't open.
What am I doing wrong ? Code below
Link: https://jsfiddle.net/snake93/mfhvs6xp/55/
I almost forgot, is it possible to remove the black border via css when the menu is active? Example: https://ibb.co/jwWzL7T
$('.strunz').selectpicker();
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
$('.strunz').selectpicker();
.optns {
background: red;
}
.optns:hover {
background: black !important;
color: yellow !important;
}
.btn {
border-radius: 0px !important
}
.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
outline: none !important;
}
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
Add Popper under jQuery as you did and for black border add this css
Popper jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
CSS
.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
outline: none !important;
}
Everything is fine in your code except you forgot to link popper.js cdn link. Use it and your dropdown will work fine. See the preview:
$('.strunz').selectpicker();
.optns {
background: red;
}
.optns:hover {
background: black !important;
color: yellow !important;
}
.btn {
border-radius: 0px !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
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>
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>
Is it possible to force/require a user to make a selection from a drop down menu?
Example:
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
By default "Volvo" is selected. What I want is for the browser to know that the user has made a selection and not accept the auto default.
I am thinking something like this:
<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Any advice?
A lot of time has passed since the question was posted.
For anybody stumbling over this like I did, the solution became a lot simpler by now:
You can just add a first option to the selection, with no value set.
The browser will automatically treat this like "nothing was selected":
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">Please select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
JSFiddle showing it work with no further JS required: https://jsfiddle.net/nrs5a7qh/
I tweaked an example from jquery validate to get this working for you. I know in your original question you asked for it to be based in HTML5 but maybe this blended example is acceptable.
http://jsfiddle.net/36MkJ/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#carsForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
<select name="cars" class="required">
<option value="">Select a car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
Original Example was on http://docs.jquery.com/Plugins/Validation