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.
Related
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>
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
Here I have custom code where I test set array to select2 value. But when I set array items to select2, all items not have setted. How can be solved this problem?
$('#tags').select2({
multiple:true,
tags: true,
placeholder: 'Select tag...'
});
var tags = ["design", "template"];
$('#setTags').click(
function(e) {
$('#tags').select2('val', tags);
}
);
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="tags[]" id="tags" multiple="multiple">
<option value="design">Design</option>
<option value="portfolio">Portfolio</option>
<option value="template">Template</option>
</select>
<button id="setTags">Set tags</button>
You need to replace $('#tags').select2('val', tags); to $('#tags').val(tags);
then trigger change event like this.
$('#tags').select2({
multiple:true,
tags: true,
placeholder: 'Select tag...'
});
var tags = ["design", "template"];
$('#setTags').click(
function(e) {
$('#tags').val(tags);
$('#tags').trigger('change');
}
);
#tags {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="tags[]" id="tags" multiple="multiple">
<option value="design">Design</option>
<option value="portfolio">Portfolio</option>
<option value="template">Template</option>
</select>
<button id="setTags">Set tags</button>
Reference
I need to hide/show options from select2 multi-select
I have tried something like this but option Two is not hidden:
$(document).ready(function() {
$('#test').select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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="test" multiple style="width:250px">
<option value="1">One</option>
<option value="2" style='display:none;'>Two</option>
<option value="3">Three</option>
</select>
I have added a jsfiddle:
https://jsfiddle.net/sindhujagovindaraju/xpvt214o/738000/
You have to use "disabled" instead of "display: none" and write css like below:
$(document).ready(function(){
$("#test").select2();
});
.select2-container--default .select2-results__option[aria-disabled=true] { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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="test" multiple style="width:250px">
<option value="1">One</option>
<option value="2" disabled>Two</option>
<option value="3">Three</option>
</select>
you can use below code:
option[value=2] {display: none;}
best if you add for each li element a css class/id dynamically and target them instead of value which might dynamic
ps: IE might be problematic a bit though Options with display:none not hidden in IE
.Select-input option:nth-child(4){display: none;}
<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();