I am using multi select option(pillbox) using select2.
Using the above code just gives me a basic dropdown box .
Q: I am not able to get the search box where the user can type.
Thank you for taking time and looking into my query!
Here is the code.
<html>
<head>
<title>multiple select</title>
<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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>Multiple select example
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration -->
<select id="multipleSelectExample" data-placeholder="Select an option" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$("#multipleSelectExample").select2();
}
);
</script>
Please try the following i think you need to place the jQuery script tag before the select2. And also i think you need to use a more recent version of jQuery.
<html>
<head>
<title>multiple select</title>
<script src="https://code.jquery.com/jquery-3.4.0.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>
<p>Multiple select example</p>
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration-->
<select class="" id="multipleSelectExample" data-placeholder="Select an option" multiple="">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$('#multipleSelectExample').select2();
}
);
</script>
</html>
Related
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
<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
</select>
How to trigger an alert on clicking bootstrap select live search input box ?
I tried with this, but its not working.
$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
alert("live searching ..");
})
Any suggestions would be appreciated.
Thanks in advance.
Here is probably the correct Solution (probably):
Since the select-Tag is replace later(after the onload Event), so to be on the save side, so that it can be found "better" with a timeout.
I replace the alert call to a config.info call.
setTimeout(function(){
var newBox = $("#selectControl").get(0).parentNode;
$(newBox).find("input").on("click",function(){
console.info("live searching ..");
});
}, 1000);
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
<div class="container">
<div>
<select class="selectpicker" data-live-search="true" id="selectControl">
<option data-tokens="Option 1">Option 1</option>
<option data-tokens="Option 2">Option 2</option>
<option data-tokens="Option 3">Option 3</option>
<option data-tokens="Option 4">Option 4</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
</script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
</script>
</body>
btw.: details to te Control can be found in this Github, found it while google-ing
I have a selectpicker multiselect dropdown. I'm not able to invoke 'onclick' when I select any option. But this works with the normal html multiple dropdown. How to make it work with selectpicker?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/css/bootstrap-select.min.css" />
<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.1/jquery.min.js">
</script>
<script
src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/js/bootstrap-select.min.js"></script>
</head>
<body>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" onclick="myFunction(this)">Volvo</option>
<option value="bmw" onclick="myFunction(this)">Bmw</option>
<option value="opel" onclick="myFunction(this)">Opel</option>
<option value="audi" onclick="myFunction(this)">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
<script type="text/javascript">
function myFunction(option) {
if (option.selected) {
alert(option.text);
}
}
</script>
</body>
</html>
I have changed the dropdownlist a bit below:
<select class="selectpicker" onchange="myFunction()" id="cars" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Then modified your myFunction below:
var oldarr = [];
var newarr = [];
function myFunction() {
if ($("#cars option:selected").length == 1) {
oldarr = [];
oldarr.push($("#cars option:selected").val());
alert($("#cars option:selected").val());
}
else {
newarr = [];
$("#cars option:selected").each(function(i){
newarr.push($(this).val());
});
newitem = $(newarr).not(oldarr).get();
if (newitem.length > 0) {
alert(newitem[0]);
oldarr.push(newitem[0]);
}
else {
oldarr = newarr;
}
}
}
Basically, the oldarr will store the previous list of selected items. Then we insert the latest list of selected items into newarr. Then we compare what is in the newarr but not in the oldarr. This way we can filter out only the latest clicked item. If the user deselects an item instead, we just assign the newarr to oldarr.
try this, use forEach to find selected option
var selectEl = document.querySelector('.selectpicker');
var options = document.querySelectorAll('.selectpicker option');
selectEl.addEventListener('change', function() {
options.forEach(function(option) {
if(option.selected) { alert(option.value); }
})
})
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
or use jQuery find :select
$('.selectpicker').change(function() {
var thisValue = $(this).find(':selected').attr('value') ;
alert(thisValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Hope help :)
I have used jQuery to do this. since you use select from bootstrap, it will ordered as list not as options, thats why it didnt worked for you
$(function() {
$('.selectpicker').on('change', function(){
var selected = $(this).find("option:selected").text();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<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.1/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.6.3/js/bootstrap-select.min.js"></script>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" >Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
Hope this helps..!
I need to select only 1 option inside a group. I have used multiple-select.js
I should be able to click either
A1 OR A2 OR A3
AND
B1 OR B2 OR B3
I also tried with - thought that it can deselect previous buttons when a new one is clicked as long as all of them have the same name but in vain.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group A">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</optgroup>
<optgroup label="Group B">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</optgroup>
</select>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
onClick: function(view) {
//;
}
}
);
</script>
</body>
Normally,multiple-select plugin does not support your desired behavior where you can choose only one choice in each optgroup in a single select.However,you can choose only one choice in a single select without optgroup.
So you can use 2 "single row" selects to accomplish your desired functionality.
PS: I have tried to customize the multiple-select behavior enabling you to choose only one radio button in a single optgroup,but the plugin is not flexible enough.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>
<body>
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A</label>
<select multiple="multiple">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B</label>
<select multiple="multiple">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<script>
$('select').multipleSelect({
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
single: true,
onClick: function (view) {
/*
view.label: the text of the checkbox item
view.checked: the checked of the checkbox item
*/
//Uncheck other checkboxes in the group
},
onOptgroupClick: function (view) {
/*
view.label: the text of the optgroup
view.checked: the checked of the optgroup
view.children: an array of the checkboxes (DOM elements) inside the optgroup
*/
}
});
</script>
</body>
</html>
Hope it can help you.
For the sake of space in a form ,use bootstrap inline form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple select to function like radio in a group</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<form class="form-inline">
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A </label>
<select class="form-control">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B </label>
<select class="form-control">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<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>
</body>
</html>
I'm trying to have Select 1 update Select 2 and then have Select 2 fire.
Select 2 only fires when controlled directly.. I'm stumped!!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Firing</title>
</head>
<body>
<p>Select 1 updates Select 2, but select 2's alert does not fire</p>
<select id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<p>Select 2 only fires alert when controlled directly</p>
<div>
<select id="select2" onchange="alert(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</body>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(function() { //run on document.ready
$("#select1").change(function() { //this occurs when select 1 changes
$("#select2").val($(this).val());
});
});
});
</script>
</html>
Thank you!
$("#select1").change(function() {
$("#select2").val($(this).val()).trigger('change');
//or
$("#select2").val($(this).val()).change();
});
Is this what you need? Or did i miss something?