This question already has answers here:
JQuery Select2 - How to select all options
(18 answers)
Closed 4 years ago.
I use jQuery select2 to choose more than one list item.
But unfortunately, the below code must have all 3 values being loaded into the select field. However it loads only the first item.
How do I load all the 3 items into the select2 list?
<head>
<script src="https://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 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>
</head>
<body>
<select id="e1" style="width:400px">
<option value="AL">Alabama</option>
<option value="NY">New york</option>
<option value="WY">Wyoming</option>
</select>
<script>
var selectedValuesTest = ["WY","AL", "NY"];
$(document).ready(function() {
$("#e1").select2({
multiple: true,
});
$('#e1').select2('val', selectedValuesTest);
});
</script>
</body>
Set the value in select and trigger the change event using
$('#e1').val(selectedValuesTest).trigger('change');
var selectedValuesTest = ["WY", "AL", "NY"];
$(document).ready(function() {
$("#e1").select2({
multiple: true,
});
$('#e1').val(selectedValuesTest).trigger('change');
});
<script src="https://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 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 id="e1" style="width:400px" name="states[]">
<option value="AL">Alabama</option>
<option value="NY">New york</option>
<option value="WY">Wyoming</option>
</select>
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>
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:
After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})