Adding a placeholder to Bootstrap dropdown select - javascript

I'm using the bootstrap dropdown select to get a list of data to my form.
The code is as below
jQuery(async function () {
await LocationService.getOnlineLocations();
let allLocations = LocationService.getAllLocationsAsArray();
console.log(allLocations);
$("#bookingFromInput").ready(function () {
let text = "";
allLocations.forEach((element) => {
text += `<option value="${element.name}">${element.name}</option>`;
});
console.log(text);
$("#bookingFromInput").html(text);
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<select class="form-select" id="bookingFromInput" name="from" aria-label="Default select example" autofocus>
<option></option>
</select>
I'm trying to figure out a way to add the placeholder="From" but the placeholder attribute doesn't seem to work.
Is there a fix for this?

There is no placeholder for an HTML select. You will have to make From, the first option or optgroup(not recommended here). Common practice is to use it like this.
let text = "<option value=''>From</option>";
By keeping the value='' you can easily ensure that selection is not made by checking $("#bookingFromInput").val()=== "".

Rather than trying to put "From" in the option text - the semantically correct approach would be to apply a label with that text - so that the user knows what the select is in context to.
You should always apply relevant labels to your from controls for accessibility and UX best practise. Note the for="" attribute on the label - that ties the label to the form control with that id and allows screen readers to translate that into meaningful structure.
label {display:block; margin-bottom: 4px}
<div class="form-group">
<label for="bookingFromInput">From:</label>
<select class="form-select" id="bookingFromInput" name="from" aria-label="Booking From Location" autofocus>
<option>Amsterdam</option>
<option>Brunswick</option>
<option>London</option>
<option selected>Stongehenge</option>
<option>Sydney</option>
</select>
</div>

//try using select2 [![answer][1]][1]
$('#bookingFromInput').select2({'placeholder':'From',allowClear: true});
//empty if options present
$('#bookingFromInput').empty();
//add empty value
$('#bookingFromInput').append('<option value=""></option>');
//add option list
$('#bookingFromInput').append('<option value="Bengaluru">Bengaluru</option>');
$('#bookingFromInput').append('<option value="Delhi">Delhi</option>');
$('#bookingFromInput').append('<option value="NewYork">NewYork</option>');
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="bookingFromInput" style="width:80%;">
<option value=""></option>
</select>

Related

Select Multiple Options from a dropdown list and input selected options to input field

I would like to be able to make multiple selection in a dropdown list and have those selected input written onto an input field with HTML, CSS and JS. I am using bootstrap and this is what I got so far, but haven't been able to find out how to select multiple items and have those selection being written into the input field. I tried <select multiple> but doesn't seems to work.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nestia Umbrella</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="./app.css">
<script src="https://kit.fontawesome.com/86fa3c1316.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon" placeholder="Services Rendered">
<option value="General Cleaning">General Cleaning</option>
<option value="Change Battery">Change Battery</option>
<option value="Re-align Spring">Re-align Spring</option>
<option value="Replace Spring">Replace Spring</option>
<option value="Replace Battery Cover Screw">Replace Battery Cover Screw</option>
</select>
</div>
</body>
</html>
Please find the multi-select drop-down sample code below. You can use the cdn below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.js"></script>
if you are using react you can use with npm
npm install choices.js
with yarn
yarn add choices.js
You can initialize this drop-down using the javascript.
Refer this https://github.com/Choices-js/Choices#readme document to use options for drop-down menu.
$(document).ready(function(){
var multipleSelectDropdown = new Choices('#inputGroupSelect04', {
removeItemButton: true
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.js"></script>
<div>
<div class="row d-flex justify-content-center">
<label class="col-3">Select the something</label>
<select id="inputGroupSelect04" placeholder="Services Rendered" multiple>
<option value="General Cleaning">General Cleaning</option>
<option value="Change Battery">Change Battery</option>
<option value="Re-align Spring">Re-align Spring</option>
<option value="Replace Spring">Replace Spring</option>
<option value="Replace Battery Cover Screw">Replace Battery Cover Screw</option>
</select>
</div>
</div>
If you want to write selections to a input, you will need a script.
Having bootstrap or not, will not affect this.
You could do something like this:
var select = document.getElementById("inputGroupSelect04");
var input = document.getElementById("input");
select.addEventListener("change", function(event) {
const selected = document.querySelectorAll('#inputGroupSelect04 option:checked');
const values = Array.from(selected).map(el => el.value);
input.value = values.join(', ');
})
I have created an example here: https://codepen.io/bj-rn-nyborg/pen/WNGNwpV

How can I get selected values from Bootstrap multiple selectpicker?

Here is my select element and it has multiple attribute;
<select id="dd-personnels" onchange="personnelChange()" asp-items="Model.Personnels" multiple data-max-options="1" class="form-control form-control-sm selectpicker"></select>
Here is my code to initialize a selectpicker from select above;
$('.selectpicker').selectpicker({ liveSearch: true });
How can I get selected values in the onchange of the select?
Even if inline event handler is a bad practice you need to add two keywords to your inline:
<select id="dd-personnels" onchange="personnelChange(this, event)" ....
Now your function is:
function personnelChange(ele, event) {
var val = $(ele).selectpicker('val');
console.log(val);
}
For details you can take a look to the documentation
The snippet:
function personnelChange(ele, event) {
var val = $(ele).selectpicker('val');
console.log(val);
}
$('#dd-personnels').selectpicker({
liveSearch: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select id="dd-personnels" onchange="personnelChange(this, event)" asp-items="Model.Personnels" multiple data-max-options="1" class="form-control form-control-sm selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>

Bootstrap Multiselect showing 0 selected even if i select multiple values

When I select multiple values it is showing 0 selected in the label. I think there is something wrong with the Javascript. Take a look at this image: https://photos.app.goo.gl/5Dxwt5gvuE277Uyw9
I also want to store all the values in my database. Should I store all the values in an array and then pass it to PHP?
$(document).ready(function() {
$("#multifield1 option:selected").each(function() {
console.log(this.text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<div class="col-lg-6">
<div class="form-group">
<strong>Area of Interest:</strong>
<select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
</div>
</div>
You need to use onChange event handler:
$('#multifield1').multiselect({
onChange: function(option, checked) {
var selectedItems = $("#multifield1 option:selected").length;
console.log('selected items: ' + selectedItems);
}
});
$('button.btn.btn-info').on('click', function(e) {
var selectedItems = $("#multifield1 option:selected").length;
console.log('Info btn: selected items: ' + selectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<button type="button" class="btn btn-info">Info</button>
<div class="col-lg-6">
<div class="form-group">
<strong>Area of Interest:</strong>
<select id="multifield1" class="multiselect-ui form-control" multiple="multiple">
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
</div>
</div>
This code is placed in your $(document).ready event handler, meaning it will only execute when the page is first loaded. And I assume that initially on page load, nothing is selected yet.
You could listen for the select's onchange event and use your code inside the handler, so that the code runs every time the select values are changed.
$(document).ready(function() {
$("#multifield1").on("change", function() {
$(this).find("option:selected").each(function() {
console.log(this.text);
});
})
});
To send values in an array to PHP you should set "name" attribute of your select tag like this:
<select name="test[]" id="multifield1" class="multiselect-ui form-control" multiple="multiple">
Also, don't forget to make your form in a tag and add a submit button.

How to focus bootstrap select picker

I've use data-live-search for searchable option. When I click on focus button it should focus again select. I've use following code
$("#focus").click(function() {
$(".selectpicker").focus();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>
Whenever I press enter t is focus to select box but search option is not shown. I've attach screenshot
Please give me suggestion for display proper option with search option when I enter it
focus() not working because it turned to customized select not native select option, by the way there is a native way to do this in selectpicker plugin, an event called toggle
$("#focus").click(function() {
// toggle
$('.selectpicker').selectpicker('toggle');
// select by value
$('.selectpicker').selectpicker('val', 'Test');
$('.remove-example').selectpicker('refresh');
// change highlight
$('.dropdown-menu li').removeClass('active')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>

How do I make the select2 search box "inline"?

I am migrating from Twitter's typeahead.js to select2.
One thing I really like about typeahead.js is how the selected value and the search box appear in the same field. You can try it out here.
I would like to achieve the same in select2. You'll notice that in select2 the "currently selected value" is a different place than the search box.
How do I make it so that it is the same element?
At least now is always inline...
$(document).ready(function() {
$('select').select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
Inline:
<select>
<option value="Pizza">Pizza</option>
<option value="Burger">Burger</option>
<option value="Sugar">Sugar</option>
</select>
indeed!
But! If you use bootstrap you have to make the form inline. Just add the class form-inline to the form. I had to do that to get it inline...
You Have Used Multiple Html Attributes Used:
For Example:
Using For bootstrap Css and Bootstrap Script
Using For Bootstrap Select Css And Script
Using For Latest query Version
write your Drop down Code
<select class="selectpicker" data-live-search="true" multiple>
<option data-tokens="ketchup mustard">Hot</option>
<option data-tokens="mustard">Burger</option>
<option data-tokens="frosting">Sugar</option>
</select>
For example:
<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" />
<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="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" multiple>
<option data-tokens="Pizza">Pizza</option>
<option data-tokens="Burger">Burger</option>
<option data-tokens="Sugar">Sugar</option>
</select>
<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" />
<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="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true" multiple>
<option data-tokens="ketchup mustard">Hot</option>
<option data-tokens="mustard">Burger</option>
<option data-tokens="frosting">Sugar</option>
</select>
Try Code:

Categories