This question already asked, but it is not solve my issue
Am tying to use Bootstrap Multiselect in my project.
When I use default value selection in bootstrap multiselect search bar not showing
demo https://jsfiddle.net/xctpL8am/2/
If am not using $('#example-getting-started').multiselect('select', ['1', '3'],{....}); in drop-down search bar not showing.
If am using $('#example-getting-started').multiselect({....}); in drop-down search bar showing.
I want to show search bar with default value selection.
$(document).ready(function() {
$('#example-getting-started').multiselect('select', ['1', '3'],{
includeSelectAllOption: false,
enableFiltering: true,
includeFilterClearBtn: true,
enableCaseInsensitiveFiltering : true
});
});
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/prettify.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/prettify.js"></script>
<select id="example-getting-started" multiple="multiple">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
The issue is because the constructor syntax you're using for the library is incorrect; you cannot initialise the library and set the selected options at the same time.
The documentation suggests that you should initialise the plugin on your object and then set the selected options in a separate call - see the select method in the previous link.
Using this method means that the Search box is displayed correctly:
$(document).ready(function() {
let $select = $('#example-getting-started').multiselect({
includeSelectAllOption: false,
enableFiltering: true,
includeFilterClearBtn: true,
enableCaseInsensitiveFiltering: true
});
$select.multiselect('select', ['1', '3']);
});
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/prettify.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/prettify.js"></script>
<select id="example-getting-started" multiple="multiple">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
Related
I'm wondering if there is a way to have fixed options on a multi-select select2 field without being able to remove them from the field.
You can use selected with disabled
$('select').select2({
width: 'resolve',
placeholder: 'This is my placeholder',
disabled: true
});
console.log($('select').val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<select style="width: 75%" multiple>
<option selected>option1</option>
<option selected>option2</option>
<option selected>option3</option>
</select>
To send the values you will have to use javascript manually.
I have this simple select html field, i am learning JS, I just want to have a autocomplete kind of thing in this field, so when user type it should have this kind of functionality, can It be done?
<html>
<body>
<select>
<option>USA</option>
<option>India</option>
<option>Canada</option>
<option>UK</option>
</select>
</body>
</html>
I have used this library and modified it for my needs. I had modified it to have search clear and custom styling of dropdown. Easy to do. You can also give it a try. https://davidstutz.github.io/bootstrap-multiselect/
Below is the example
<!-- Initialize the plugin: -->
$(document).ready(function() {
$('#example-getting-started').multiselect({
enableFiltering: true,
includeFilterClearBtn: false
});
});
.hide
{
display:none;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" integrity="sha512-fp+kGodOXYBIPyIXInWgdH2vTMiOfbLC9YqwEHslkUxc8JLI7eBL2UQ8/HbB5YehvynU3gA3klc84rAQcTQvXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<select id="example-getting-started" class="hide">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</body>
The previous answer is working fine, but one little more addition to the searchbox is sensiability to lower cas.
so this more accurate code for your issue.
<div class="container my-5">
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
NB: i'm using bootstrap v4
here is also a link to the source code
https://mdbootstrap.com/snippets/jquery/mdbootstrap/921549#html-tab-view
I need to highlight both cars and vans, the below function will highlight for non multiple select2 list, I need to highlight multiple and non multiple selects.
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(type, selector) {
$(type+'select2-'+ selector +'-container').effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
$('#cars').select2();
$('#vans').select2();
highlightSelect2("#","cars")
highlightSelect2("#","vans")
});
</script>
</body>
</html>
You can define the actual select2 classes which will be always same in the library and never changes.
Firstly, check if the select2 is multiple or not. And call your highlightSelect2 function accordingly by passing true for multiple select highlight else and for normal __rendered select2 options.
Add a class to your html selects and check if they have prop of multiple and call select2 for highlighting that html select.
Working Demo:
function highlightSelect2(isMultiple = null) {
//is multiple
var isWhat = isMultiple ? '--multiple' : '__rendered'
//highlight
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
//check each and highlight
$('.mySelect').each(function(index, element) {
//check if its muliple
let prop = $(element).prop('multiple')
//call functions
prop ? highlightSelect2(prop) : highlightSelect2()
})
});
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
</body>
</html>
I got new javascript library or plugins right now and I love it, so cool and so easy to use. This is bootstrap-select by Silvio Moreto. But now I'm looking for a way to create, add, or append new option on a select when I'm using live search if "No search match".
The same at https://www.electrictoolbox.com/javascript-add-options-html-select/ but little different I want the button are inside the search box and it can save into the database
I'm using the following codes below:
$('.selectpicker').selectpicker({
style: 'btn-default',
width:'100%'
});
<link rel="stylesheet" type="text/css" href="//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.2/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true" >
<option data-tokens="Hotdog" value="Hotdog">Hot Dog</option>
<option data-tokens="Burger" value="Burger">Burger</option>
<option data-tokens="Sugar" value="Sugar">Sugar</option>
<option data-tokens="Donut" value="Sugar">Donut</option>
</select>
I'm imagine this:
this will led you to your desired result,apply css on your own,might help you
$("#tags").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append(" <em>(new)</em>");
}
return $result;
}
});
#tags
{
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id='tags'>
<option value="test">Test</option>
</select>
<html>
<head>
<title>Multi-select</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
</head>
<body>
<select id="example" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script>
$('#example').multiselect({
buttonClass: "btn btn-default",
buttonWidth: "140px",
});
</script>
</body>
</html>
this is my code...i have to print selected values from dropdownlist...how can i use jquery...if i select 1,2,3 options it will print that values
You can use .val() along with select element selector:
When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), it returns an array containing the value of each selected option, or null if no options are selected.
$('#example').val();
You can convert this array to CSV using .join().
$( "#myselect option:selected" ).text();