Add icon to select2 not based on value - javascript

I am using select2 for creating nice dropdowns. Now, I am searching for a way to add icons / images to the dropdown elements. I want something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#iconStyledDropdown').select2();
});
</script>
<select id="iconStyledDropdown">
<option value="firstIcon"><span class="icon1"></span>First icon</option>
<option value="anotherFirstIcon"><span class="icon1"></span>Another first icon</option>
<option value="secondIcon"><span class="icon2"></span>Second icon</option>
<option value="lastEntry"><span class="icon2"></span>Last entry</option>
</select>
I know the dropdown templating documentation article but this styling is based on the text / value of the option. I need a way to define the icons manually.

You could add a class to the option itself if that is possible. You can then use state.element.className to get the correct icon
<select id="iconStyledDropdown">
<option value="firstIcon" class="icon1">First icon</option>
<option value="anotherFirstIcon" class="icon1">Another first icon</option>
<option value="secondIcon" class="icon2">Second icon</option>
<option value="lastEntry"class="icon2">Last entry</option>
Then change the template for results to use the className to get the correct icon.
function addIcon(option) {
var baseUrl = "/user/pages/images/flags";
return $('<span><img src="' + baseUrl + '/' +
option.element.className.toLowerCase() + '.png"/> ' +
option.text + '</span>');
}
Your init code will look like this:
$('#iconStyledDropdown').select2({
templateResult: addIcon
});

Related

Remove and add values from dropdown using javascript/jQuery

I am trying to achieve the following thing in my code but it is getting complicated.
I have 'n' dropdowns with or without duplicate values in it.
for simplicity lets assume following scenario:
dropdown1:
<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>
dropdown 2:
<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>
dropdown3 :
<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>
case1:
if user select value 100 from dropdown 1 then 100 should be removed from all the dropdowns.and when user change dropdown 1 value from 100 to 200 then 100 should be added back to all the dropdowns and 200 should be removed from all the dropdowns.
removing seems easy but adding back values is little difficult.
how can I maintain a list or some other data structure to remember which value to add and where incase of multiple value change? is there any advance jquery feature or generic javacript logic i can use ?
If it is sufficient to just disable the option instead of actually removing it, the following could work for you. You might want to adapt the handling of the selects when initially loading the site.
$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);
$('select').on('change', function() {
var val = $(this).val();
$('select option').prop('disabled', false);
$('select option[value="' + val + '"]').not($(this)).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='102'>102</option>
</select>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='201'>201</option>
</select>
<select>
<option value='100'>100</option>
<option value='300'>300</option>
<option value='301'>301</option>
</select>
It would be better to set display to none instead. Hence, you will avoid the complications of adding or removing in the appropriate order.
So, you can easily return them visible.
$( "option" ).each(function( index ) {
$(this).css("display", "");
});
$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i] option[value=selected_value]").remove();
}
});
Set id of first dropdown="drop"
Here select the value and define it S a variable loop through dropdown with in page remove option when value=selected_value

Selecting option value of selected element with jquery

I'm trying to use jquery to select the option value of the selected element in an html dropdown.
HTML
<select class="select1">
<option value ="0">" + state.greens[0].name + "</option>
<option value ="1">" + state.greens[1].name + "</option>
<option value ="2">" + state.greens[2].name + "</option>
</select>
The option values represent an index position in an array that I can load to generate additional data about objects within them.
I'm trying to use jquery to grab the option value of whatever dropdown element is currently selected.
Right now I'm using this code but it's not working:
JQUERY
var a = $(".select1 option:selected");
However it's not bringing back "1", "2", "3", etc.
When I run console.log(a) I get the following:
Not sure what's happening.
The idea is that I can use the variable a to load data like state.greens[a].price, state.greens[a].ingredients, etc.
You are almost there. Just give:
var a = $(".select1 option:selected").attr("value");
Or give this:
var a = $(".select1").val();
You need to get the value of the <select>.
var a = $(".select1").val(); // is the simple solution
Try this..
HTML
<select class="select1" id="select1">
<option value ="0">Option 1</option>
<option value ="1">Option 2</option>
<option value ="2">Option 3</option>
</select>
Pure Javascript solution
document.getElementById("select1").addEventListener("change", function(){
var a = document.getElementById("select1").value;
alert(a);
});
Check out this Fiddle
Snippet
document.getElementById("select1").addEventListener("change", function(){
var a = document.getElementById("select1").value;
alert(a);
});
<select class="select1" id="select1">
<option value ="0">Option 1</option>
<option value ="1">Option 2</option>
<option valuae ="2">Option 3</option>
</select>

Selecting multiple value from a dropdown and call a javaScript function

I know I can create a multiple select dorpdown like this -
<select name="city" multiple>
<option value="Dallas">Dallas</option>
<option value="New York">New York</option>
<option value="Kansas">Kansas</option>
<option value="Massachusetts">Massachusetts</option>
</select>
Using this multiple select dropdown I can select multiple city from. But can I select a javascript method separately for each of the city?
Thanks in advance.
You can get the value using jQuery '.val()' function.
Jquery.fn.val()
You can see how it works in the following example:
http://jsfiddle.net/uoL3s610/
$(document).ready(function(){
$('[name="city"]').change(function(){
$('#selected_container').text($('[name="city"]').val());
});
});
Or this example
http://jsfiddle.net/uoL3s610/1/
$(document).ready(function(){
$('[name="city"]').change(function(){
$('#selected_container').text('');
$.each($('[name="city"]').val(),function(index,value){
$('#selected_container').text($('#selected_container').text() + ', ' + value)
});
});
});
You are able to store the selected value of your dropdownlist in a variable and then continue with an If-structure or a switch:
$("city:selected").each(function () {
switch($(this).val()){
case "city1":
break;
}
});

How to have the current selected value option under dropdown in tablepress?

I would like to know how to have the selected option value under dropdown after selecting it, because whenever I'm selecting any option, it gets deleted and comes beneath the dropdown option with a link. When you click it, it is going back to the dropdown menu. Code before selection
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Fruit">Fruit</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select>
HTML Code after selecting option as "Fruit"
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select><a class="filter-term filter-term-fruit" href="#">Fruit</a>
</div>
Css Code:
.column-filter-widgets a.filter-term:hover {text-decoration: line-through!important;}
Here is the javasript file Click here to check javascript file. I know there are many threads similar to that but since this problem is for Wordpress Plugin tablepress datatables column filter widgets and it's under javascript file which I don't know how to solve. I'm sure the problem can easily be solved after looking at the above link.
Thanks
Try this, i'm assuming this what you were after from what i read, here's a JS Fiddle to show you http://jsfiddle.net/7a38ast6/7/
JQuery
var optionvalue = 0;
var optionvalueclass = ""
$('select.widget-0').change(function(){
optionvalue = $('option:selected', this).text();
optionvalue = optionvalue.replace(" ", "-");
optionvalueclass = optionvalue.toLowerCase();
$(".widget-0").after('<a class="filter-term filter-term-' + optionvalueclass + '" href="#">' + optionvalue + '</a>');
$('option:selected', this).remove();
});

Display elements in dropdown with jquery

Good day community,
I have an ASP.NET MVC4 project, where on edit page I'm use jquery script. But I have a problem to display elements on the page.
Here is my dropdown's HTML markup before changes:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option value="3">testtsi</option>
<option selected="selected" value="4">testrtu3</option>
</select>
And here is after jquery changes
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
But it's display on the page not a selected element testrtu3, always display first element. And when I click save button saved my first value.
Here is my jQuery function:
$(document).ready(function () {
var values = [];
$(".checkboxUniversities:checked").each(function () {
values.push($(this).val());
});
$.getJSON('/Administrator/ProgramList/' + values, function (data) {
alert('Return json result new information');
var items = '<option disabled>Select a Program</option>';
$.each(data, function (i, program) {
items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
});
$('#ProgramId').html(items);
});
//var selectedElement = $("#ProgramId").find(":selected").text();
});
I guess I need somehow add selected value when create my dropdown inside jquery, or after creating, but I don't know how. Can anybody help me?
Before appeding options to your dropdown you have to save selected index or text in variable and use it further.
Sample Code:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
<input id="click" type="button" value="click me"/>
$(document).ready(function(){
var option = '<option value="1">testrtu1</option><option value="2">testrtu2</option><option value="3">testtsi</option><option value="4">testrtu3</option>';
$("input#click").click(function(){
var selInx = $("select[name='ProgramId'] option:selected").index();
$('#ProgramId').html(option);
$('select#ProgramId').prop('selectedIndex', selInx);
});
});
DEMO FIDDLE
NOTE: As we cannot connect to your backend code to get options hardcoded in code itself and on click of button dropdown will be replaced with latest options and will update the selected index based on first one. You can use either selectedindex or text based on your requirement.

Categories

Resources