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>
Related
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.
Working on Select custom search and got this JavaScript error, can any one explain why its coming?
Just created one select2 with default custom callback search function.
<html>
<head>
<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" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2({
matcher: function(term, text) {
console.log(term, text);
return text;
}
});
});
</script>
</head>
<body>
<div>
<select class="js-example-basic-single" name="state" style="width:300px">
<option value="AL">Alabama</option>
</select>
</div>
</body>
</html>
We need to return from matcher, its looking for some return value, I have already edited question.
return text;
I got new javascript library or plugins right now and I love it, so cool and so easy to use. This is bootstrap-select by Silvio Moreto. But now I'm looking for a way to create, add, or append new option on a select when I'm using live search if "No search match".
The same at https://www.electrictoolbox.com/javascript-add-options-html-select/ but little different I want the button are inside the search box and it can save into the database
I'm using the following codes below:
$('.selectpicker').selectpicker({
style: 'btn-default',
width:'100%'
});
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true" >
<option data-tokens="Hotdog" value="Hotdog">Hot Dog</option>
<option data-tokens="Burger" value="Burger">Burger</option>
<option data-tokens="Sugar" value="Sugar">Sugar</option>
<option data-tokens="Donut" value="Sugar">Donut</option>
</select>
I'm imagine this:
this will led you to your desired result,apply css on your own,might help you
$("#tags").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append(" <em>(new)</em>");
}
return $result;
}
});
#tags
{
width: 200px;
}
<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>
<select id='tags'>
<option value="test">Test</option>
</select>
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>
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>