I want to change my data-subtext attribute of the options of my select element in runtime. But data-subtext does not get updated in selectpicker.
Here's my code:
$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');
That's because .selectpicker class stands for the select element itself not for it's options. Considering it can have more than one option you need to state which option's data-subtext you wish to change. refer to the following snippet:
$(document).ready(function() {
$('#myBtn').click(function() {
$(".selectpicker > option:eq(1)").data("subtext", "Look I'm changed");
$(".selectpicker").selectpicker('refresh');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option data-subtext="Mustard subtext">Mustard</option>
<option data-subtext="Ketchup subtext">Ketchup</option>
<option data-subtext="Relish subtext">Relish</option>
</select>
<a class="btn btn-default" id="myBtn">Update second options data-subtext</a>
Related
I have problem to set multiple values in the multiple select input. For example I need to set value 2,3 (Ketchup, Relish) in the multi-select input when I've clicked the Show Selected Option button, then the value will show in the input field.
Below is I want the expected result:
Below is my coding that I've tried, I've used this method $('.selectpicker').val(value); but it cannot work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select class="selectpicker" value="" multiple data-live-search="true">
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();
function sendFunc(){
var value = "2,3";
$('.selectpicker').val(value);
}
</script>
Hope someone can guide me on how to solve this problem. Thanks.
Please read the documentation for selecting items with programmatically with code. They have made it extremely clear on how to do this.
...From the docs linked above:
You can set the selected value by calling the val method on the element.
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
Key think to notice here is that the values are an array, not a string.
Calling .val() directly like in your code works differently to the above - you should read on further on the docs page to understand the difference compared to .selectpicker('val').
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select class="selectpicker" value="" multiple data-live-search="true">
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();
function sendFunc(){
var value = [2,3];
$('.selectpicker').selectpicker('val',value);
}
</script>
The goal is to reset the value of a dropdown list by pressing a button. Using vanilla javascript and html the following code works fine:
HTML/JS:
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
})
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button">Test</button>
As expected, when the button is pressed, the value "2" is listed in the dropdown list. However, as soon as I add materialize CSS to my HTML, the value in the dropdown list is unchanged when I click the button. I know the event listener is triggered because "executed" is displayed in the console whenever I press the button. However, the value in the dropdown menu does not change like it did before in the vanilla javascript/html. How could this happen and what can I do to troubleshoot this to find the source?
HTML/JS with materialize CSS:
$(document).ready(function() {
// Initialize materialize data picker
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
})
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>
<body>
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>
</html>
Thank you to whoever provided the edit to make this executable. After playing with this a little more I noticed that after pressing the button, if you click on the dropdown menu again the value automatically changes to "2" before you even select another option.
You could reinitialize the plugin in your eventListener after the update of the select element.
In addition to my code, you should outsource the initialization to a function in order to stay DRY.
$(document).ready(function() {
// Initialize materialize data picker
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
})
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>
<body>
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>
</html>
I need to highlight both cars and vans, the below function will highlight for non multiple select2 list, I need to highlight multiple and non multiple selects.
<!DOCTYPE html>
<html>
<body>
<script src="//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 rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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 name="cars" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(type, selector) {
$(type+'select2-'+ selector +'-container').effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
$('#cars').select2();
$('#vans').select2();
highlightSelect2("#","cars")
highlightSelect2("#","vans")
});
</script>
</body>
</html>
You can define the actual select2 classes which will be always same in the library and never changes.
Firstly, check if the select2 is multiple or not. And call your highlightSelect2 function accordingly by passing true for multiple select highlight else and for normal __rendered select2 options.
Add a class to your html selects and check if they have prop of multiple and call select2 for highlighting that html select.
Working Demo:
function highlightSelect2(isMultiple = null) {
//is multiple
var isWhat = isMultiple ? '--multiple' : '__rendered'
//highlight
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
//check each and highlight
$('.mySelect').each(function(index, element) {
//check if its muliple
let prop = $(element).prop('multiple')
//call functions
prop ? highlightSelect2(prop) : highlightSelect2()
})
});
<!DOCTYPE html>
<html>
<body>
<script src="//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 rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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 name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
</body>
</html>
I need to highlight only the #vans and not the #cars
Sometimes #vans can be multiple and sometimes it can be a non multiple too. However I must be able to specifically pass the ID selector to highlight the select. Here is the code below from Highlight a select2 using highlight method and using css selector answer
<!DOCTYPE html>
<html>
<body>
<script src="//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 rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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 name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(selector, isMultiple) {
var isWhat = isMultiple ? '--multiple' : '__rendered'
$('.select2-selection' + isWhat).effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2();
$('.mySelect').each(function(index, element) {
let prop = $(element).prop('multiple')
prop ? highlightSelect2("#vans",prop) : highlightSelect2("#vans")
})
});
</script>
</body>
</html>
If you know that only the select#vans needs highlighting, you don't need to iterate over all Select2 jQuery items. Additionally, your highlightSelect2 isn't using the selector you've passed in.
Using your code sample, I've modified it so that only the #vans element will be highlighted by:
not iterating over all select2 elements (using .each)
This lets you only highlight the #vans, directly
Modifying highlightSelect2 to use the passed-in selector
Removing isMultiple logic — it wasn't necessary
<!DOCTYPE html>
<html>
<body>
<script src="//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 rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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 name="cars" class="mySelect" id="cars" multiple>
<option value="volvo">Cars</option>
</select>
<select name="vans" class="mySelect" id="vans">
<option value="volvo">Vans</option>
</select>
<script>
function highlightSelect2(selector) {
$(selector)
.next('.select2-container')
.find(".select2-selection")
.effect("highlight", {
color: '#f88'
}, 10000);
}
$(document).ready(function() {
//initilize select2
$('.mySelect').select2( { width: "25%" });
// highlight the #vans select2
highlightSelect2("#vans");
});
</script>
</body>
Run the code snippet and you'll see it works as you expect for your specific example.
I'm trying to make a dynamic dropdown selection using this theme with Javascript. The <option> elements are taken from an array in a text file using AJAX and inserted in the <select> dropdown:
<head>
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://localhost/array.txt",
beforeSend: function(xhr) {
xhr.overrideMimeType("text/plain; charset=x-user-defined");
}
})
.done(function(data) {
var myArray = JSON.parse(data);
var output = [];
$.each(myArray, function(key, value)
{
output.push('<option value="' + value + '">'+ value +'</option>');
});
$('#myselect').html(output.join(''));
});
</script>
And here's the HTML part:
<body>
<form id="myform" action="select.php">
<input id="myinput" name="owncategory" type="text"> <br><br>
<div>
<select class="cs-select cs-skin-border" id="myselect">
<option value="" disabled selected>Select a category</option>
</select>
</div>
<div><input id="mysubmit" type="submit" value="Submit"></div>
</form>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
new SelectFx($(".cs-select").get(0));
})();
</script>
</body>
The problem is, the dropdown selection (which is now stylized by the script) doesn't show the added <option> elements, even though when the page is inspected on a browser, they're there. I don't know how to show them as part of the stylized dropdown. Any ideas?
EDIT: I just figured it out, kind of. So instead of inserting it on the select element with the #myselect id:
$('#myselect').html(output.join(''));
I inserted it on a <div> element that shows up when the page loads:
$('.cs-options').html(output.join(''));
And now I get this: http://i.imgur.com/KMEurVP.png
But now my current problem is that they're un-selectable.
Work for me.
<li data-option="" data-value="therock" class=""><span>The rock</span></li>