I'm trying to figure out why I can't get the close event triggered when a bootstrap-select is closed.
$(function() {
$('.selectpicker').on('hide.bs.dropdown', function () {
alert('hide.bs.dropdown');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>
<select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
The hide.bs.dropdownevent is tied to the parent of the selectpicker, instead of the selectpicker itself, so you will need to :
$(function() {
$('#selectpicker-container').on('hide.bs.dropdown', function () {
alert('hide.bs.dropdown');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>
<div id="selectpicker-container">
<select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
the bootstrap-select plugin has different events to the standard bootstrap dropdown. see Here.
rendered.bs.select, refreshed.bs.select, change.bs.select,
hide.bs.select, hidden.bs.select, show.bs.select, shown.bs.select
hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select
all have a relatedTarget property, whose value is the toggling anchor
element.
changed.bs.select passes through event, clickedIndex, newValue,
oldValue. true if selected and false if not selected.
So, try:-
$(function() {
$('.selectpicker').on('hide.bs.select', function () {
alert('hide.bs.select');
});
});
Related
So I created a mock up of my problem. I am using Select Picker to create my multi-select drop-down. On page reload I want to save the options selected via sessionStorage.
My session Storage works successfully. It grabs the value of my options and stores them on my browser, however it won't be displayed visually to the user.
Is there a way to select the options in the drop-down menu using Javascript/jquery?
Also worth mentioning my logic might seem overkill, but I am using $(this) to grab each name attribute because I will be using this on multiple forms.
Thanks!
jsfiddle : https://jsfiddle.net/7Lhwbzs2/3/
<!--Importing CSS stylesheets-->
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<div>
<select class="selectpicker" name="Food" data-none-selected-text="Select Option(s)..." multiple>
<option value="Pizza">Pizza</option>
<option value="Wings">Wings</option>
<option value="Veggies">Veggies</option>
<option value="Rice">Rice</option>
<option value="Pasta">Pasta</option>
</select>
</div>
<script>
$('select').selectpicker({
actionsBox: true,
});
$('select').each(function( index ) {
var previousSelection = window.sessionStorage.getItem(`${$(this).attr('name')}`) ? JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
console.log(previousSelection)
});
$('select').on("change", function (e){
window.sessionStorage.setItem(`${$(this).attr('name')}`, JSON.stringify($(this).val()) );
});
</script>
You can just use selectpicker like this:
$('.selectpicker').selectpicker('val', previousSelection);
Just replace your javaScript code with this. I tested it and it works just fine:
var previousSelection
$('select').selectpicker({
actionsBox: true,
});
$('select').each(function( index ) {
previousSelection =
window.sessionStorage.getItem(`${$(this).attr('name')}`) ?
JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
console.log(previousSelection)
});
$('select').on("change", function (e){
window.sessionStorage.setItem(`${$(this).attr('name')}`,
JSON.stringify($(this).val()) );
});
$('.selectpicker').selectpicker('val', previousSelection);
I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I would like to change a picture on the site when a selector/combobox changed. It works perfectly in a Bootply, but it looks like the change event not caught neither in local env, nor in appspot...
Here is the HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/nbafantasy.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
Eastern conference
<div class="form-group">
<img src="http...">
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="11a" name="11a">
<option>-</option>
<option>4:0</option>
<option>4:1</option>
<option>4:2</option>
<option>4:3</option>
<option>3:4</option>
<option>2:4</option>
<option>1:4</option>
<option>0:4</option>
</select>
<img src="...">
</div>
<div clas
And the JS:
$('#11a').on('change', function (e) {
console.log('fired');
if((document.getElementById('11a').value).charAt(0) == "4") {
document.getElementById("21aimg").src="http....";
}else{
document.getElementById("21aimg").src="http.....";
}
});
You have to wrap your event binding in $(document).ready(fn) block:
$(document).ready(function() { // <---ensures that DOM is ready to use
$('#11a').on('change', function(e) { // <---now it will be bound on target element
console.log('fired');
if (this.value.charAt(0) == "4") {
document.getElementById("21aimg").src = "http....";
} else {
document.getElementById("21aimg").src = "http.....";
}
});
});
I have form, which contain a few selects. For the latter I used plugin select2.
In exemple below you can see, that pull-down menu of select situated in the root of document - in the body.
Can I change location of dropdown list and how to do this?
UPD: probably my question is not fairly accurate. I'm asking, how to put dropdown list in commun container with select block?
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="wrapper">
<select class="js-example-basic-single" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
I don´t know if is available on the select2 version you are using, but you can use this:
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
Source https://select2.github.io/options.html#dropdownParent
This would work
$("#selectInput").select2({ dropdownParent: "#modal-container" });
Please note that this would work on select2 version 4.0.2. For higher versions see other answers.
Reference: https://github.com/select2/select2-bootstrap-theme/issues/41
The location of your dropdown list is determined by your HTML and CSS layout. It depends on where you put the div in your example and how it is styled. See my example below which shows the dropdown list moved to the right of a yellow box.
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div style="width:100%;height:100%;position:relative;">
<div style="height:100px;width:100px;background-color:yellow;float:left;"></div>
<div style="float:left;" class="wrapper">
<select class="js-example-basic-single" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script