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:
Related
I want to create a form similar to the image below. Please someone help me with this
Please try the following code:
I'm using cdn for jquery multiselect in the below example. You can find the latest cdn here: https://cdnjs.com/libraries/multi-select
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" integrity="sha512-2sFkW9HTkUJVIu0jTS8AUEsTk8gFAFrPmtAxyzIhbeXHRH8NXhBFnLAMLQpuhHF/dL5+sYoNHWYYX2Hlk+BVHQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js" integrity="sha512-X1iMoI6a2IoZFOheUVf3ZmcD1L7zN/eVtig6enIq8yBlwDcbPVao/LG8+/SdjcVn72zF+A/viRLPSxfXLu/rbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('#my-select').multiSelect();
</script>
</body>
</html>
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>
I want to uncheck the selected options from the select picker based on the values passed into a function.
To achieve this I'm using the below code. I'm using the onclick event to uncheck the options a,b...
$("#select1 option[value='"+myname+"']").prop("selected", false);
function rem(myname) {
$("#select1 option[value='" + myname + "']").prop("selected", false);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div class="container body-content">
Select Fee Types
<select class="selectpicker form-control" id="select1" name="select1" data-width="200px" data-size="4" data-live-search="true" multiple>
<option disabled>Select</option>
<option value="a,b" selected>a</option>
<option value="d,c" selected>c</option>
<option value="f,e">e</option>
</select>
</div>
<button onclick=r em( 'a,b')>Unselect</button>
Update your function
$("#select1").selectpicker("refresh"); is missing in your function which is proper way to update selectpicker
function rem(myname) {
$("#select1 option[value='"+myname+"']").prop("selected", false);
$("#select1").selectpicker("refresh");
}
function rem(myname) {
$("#select1 option[value='"+myname+"']").prop("selected", false);
$("#select1").selectpicker("refresh");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div class="container body-content">
Select Fee Types
<select class="selectpicker form-control" id="select1" name="select1" data-width="200px" data-size="4" data-live-search="true" multiple>
<option disabled>Select</option>
<option value="a,b" selected>a</option>
<option value="d,c" selected>c</option>
<option value="f,e">e</option>
</select>
</div>
<button onclick = rem('a,b')>Unselect</button>
Ok, so you have two options. If you want only to deselect specific values you can do it as shown in snippet. If you want to deselect all values you can simply do it like this: $("#select1").selectpicker('deselectAll'); (source)
How did I find the answer? I typed "bootstrap-select methods" in google browser and it was first result. Please before you ask a question do some research by your own :) If you did, then no problem ;)
function rem(myname) {
$("#select1 option[value='" + myname + "']").prop("selected", false);
$("#select1").selectpicker('refresh');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div class="container body-content">
Select Fee Types
<select class="selectpicker form-control" id="select1" name="select1" data-width="200px" data-size="4" data-live-search="true" multiple>
<option disabled>Select</option>
<option value="a,b" selected>a</option>
<option value="d,c" selected>c</option>
<option value="f,e">e</option>
</select>
</div>
<button onclick="rem('a,b')">Unselect</button>
Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js
So, i´m trying to change a text for an option with jquery.
HTML
<select id="mySelect">
<option value="change me">Change me</option>
</select>
JS
$(document).ready(function() {
$('#mySelect').select2();
$(document).find('option[value="change me"]').text('Changed');
})
Well, nothing happends.
It´s important to change the text "live".
Fiddle: https://jsfiddle.net/gmt22ffL/2/
Is this even possible?
I´m using Jquery plugin "Select2" for my select.
It works perfectly fine. But let's try adding Select2 and see:
$(document).ready(function() {
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>
Swapping the lines work.
Destroying and changing:
$(document).ready(function() {
$('#mySelect').select2();
$('#mySelect').select2("destroy");
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>