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..!
Related
Getting console error:
SyntaxError: Unexpected end of script.
Code here:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></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>
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$("#cars2").select2();
});
</script>
<script>
<!--Need help here I think.-->
function myFunction(){
var x = document.getElementById("myDIV");
var y = this.value;
switch (y) {
case '1':
x.innerHTML = "<p>Volvo dude</p>";
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
</script>
<style>
select {
width: 150px;
}
</style>
</head>
<body>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
</body>
</html>
I can't use the snippet editor 'cause all I have is an iPad.
JSFiddle here: https://jsfiddle.net/CoolBuys1290/59qmbt0f/19/
Please help me update the div text based on selecting an option.
Updated braces.
Thanks.
You were missing the correct way to pick the current selected option that, for example in the snippet I included here, I've got using the css selector select#cars2 option:selected and through the jQuery object, because your code was based on it, instead of the vanilla document.querySelector
$(document).ready(function() {
$("#cars2").select2();
});
function myFunction(event){
var x = document.getElementById("myDIV");
//here you are picking the selected option item
var y = $('select#cars2 option:selected').val();
switch (y) {
case '1':
x.innerHTML = "<p>Volvo dude</p>";
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
select {
width: 150px;
}
<script
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></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>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
The jQuery slogan is "write less, do more!" - and the following takes it up in a way. I have created an array captions that supplies the captions for the div and - if nothing was provided - switches it back to "Hello".
const x=document.getElementById("myDIV"), captions=[null,'Volvo dude!','Roy!'];
$(document).ready(function() {
$("#cars2").select2().change(ev=>x.textContent=captions[ev.target.value]||"Hello");
});
select {
width: 150px;
}
<script
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></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>
<div id="myDIV">Hello</div>
<label for="cars">Choose a car:</label>
<select id="cars2">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
i have written the HTML and JS for concatenating the value from the dropdowns. But I am not able to get the result from it.
Code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".country",'.state').on('change',function(){
var selectedCountry = $(".country").find("option:selected").val();
var selectedState = $(".state").find("option:selected").val();
document.getElementById('demo').innerHTML= selectedCountry + " " + selectedState;
});
});
</script>
</head>
<body>
<form>
<label>Select Country:</label>
<select class="country">
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
<select class="state">
<option value="Washington">Washington</option>
<option value='New Delhi'>New Delhi</option>
<option value='London'>London</option>
</select>
</form>
<p id="demo"></p>
</body>
</html>
Selector for Eventhandler is incorrect, and you can get the value of select box by $(selectboxSelector).val() easily.
$(document).ready(function(){
$('.country, .state').on('change',function(){
var selectedCountry = $(".country").val();
var selectedState = $(".state").val();
$('#demo').html( selectedCountry + " " + selectedState );
});
});
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>
<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 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>