select2 add class to newly selected tag - jquery-select2

I want to add a class to a newly selected option/tag within a select2 multiple select element.
My approach is to use the templateSelection callback, but then the class is added to every selected option/tag when the element is initialized.
Could I use the select2:select to flag a newly added option/tag (like adding a new attribute to the data)?
Thank you very much. All the best, Phantomias
HTML
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY" selected>May</option>
<option value="JUN" selected>June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
Javascript
$('#example').select2({
placeholder: 'Select a month',
templateSelection: function (data, container) {
$(container).addClass('classHighlight');
return data.text;
}
});
$('#example').on('select2:select', function(e) {
console.log('Could I use this event?')
console.log(e.params.data);
});
fiddle:
https://jsfiddle.net/Phantomias/g4ae9xsd/23/

Related

I want to generate select2 on button click

I'm adding select2 element like this
//HTML Code
<html>
<select id="select2Basic" class="select2 form-select form-select-lg">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 2 </option>
</select>
<select id="select3Basic" class="select2 form-select form-select-lg">
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
</html>
//Jquery
<script>
$("#select2Basic").select2(); //initialise select2 using id
$("#select3Basic").select2();
</script>
// I can't use same id on multiple element, that wont work.
Now i want a button that generate select2 element when clicked

Select2 - multiple inputs with select 2 shares the same options when one of them is selected - BUGG

I am facing a strange problem with the Select2 library. I have added a few select html elements with different options specified for each tag. Each select is decorated with:
<select id="selectClient">
<option selected disabled="true">Client</option>
#foreach (var client in Model.Clients)
{
<option>#Html.DisplayFor(modelItem => client.ClientDisplayName)</option>
}
</select>
<select name="SelectedProduct" id="selectProduct">
<option selected disabled="true">Produkt</option>
#foreach (var product in Model.Products)
{
<option>#Html.DisplayFor(modelItem => product.ProductDisplayName)</option>
}
</select>
jQuery('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
jQuery('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});
Everything works like a charm to the moment when I select an option from the dropdown. When the option from the first select is selected and I move to the second select, then the second select's dropdown contains options from the first select list. Those options are separated in the html file. Did I miss something in the jQuery declaration?
Can you share your generated HTML code please ? Because I can't analyze from your razor codes
Check this example it's working fine
Js Fiddle Example
<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>
</head>
<body>
<select id="selectClient" style="width:200px">
<option selected disabled="true">Client</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select name="SelectedProduct" style="width:200px" id="selectProduct">
<option selected disabled="true">Produkt</option>
<option value="1">Option 4</option>
<option value="2">Option 5</option>
<option value="3">Option 6</option>
</select>
</body>
</html>
Js File
$('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
$('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});

HTML dropdown with ng-options binding does not work with angular-dart

Angular-dart ng-options does not seems to be working.
<select ng-model="selectedOption" ng-options="s.DisplayText for s in myOptions">
<option value="">Select Option</option>
</select>
<select ng-model="selectedOptionId">
<option value="">Select Option</option>
<option ng-repeat="o in myOptions" value="{{o.id}}">
{{o.DisplayText}}
</option>
</select>
Note that selectedOptionId is string, if we use myOption(type with id and DisplayText as properties) as model it will add new option with "?" in HTML.

how can i set a select menu in jquery mobile to the local storage?

I have a select menu in jquery mobile and I want to set it to the local storage and then later to get the values from it. This is so if a user selects a car it will be able to delete the car from the list?
Does anyone know how to accomplish this?
<div data-role="fieldcontain">
<label for="select1">Choose a car to rent:</label>
<select name="select1" id="select1" onchange="selectvalue(this.value);">
<option value="97-113-13">Avenger </option>
<option value="97-225-13">Caravan </option>
<option value="97-112-13">Focus </option>
<option value="97-119-13">Escape</option>
<option value="97-226-13">E 350</option>
<option value="97-227-13">Mustang</option>
<option value=" 97-118-13">Wrangler</option>
<option value="97-223-13">Grand Cherokee</option>
<option value="97-111-13">Picanto</option>
<option value="97-114-13">Galant</option>
<option value="97-115-13">Altima</option>
<option value="97-116-13">Juke</option>
<option value="97-222-13">Corolla</option>
</select>
</div>
DEMO
<div data-role="fieldcontain">
<label for="selCar">Select car:</label>
<select name="selCar" id="selCar">
<option value="97-113-13">Avenger</option>
<option value="97-225-13">Caravan</option>
<option value="97-112-13">Focus</option>
<option value="97-119-13">Escape</option>
<option value="97-226-13">E 350</option>
<option value="97-227-13">Mustang</option>
<option value=" 97-118-13">Wrangler</option>
<option value="97-223-13">Grand Cherokee</option>
<option value="97-111-13">Picanto</option>
<option value="97-114-13">Galant</option>
<option value="97-115-13">Altima</option>
<option value="97-116-13">Juke</option>
<option value="97-222-13">Corolla</option>
</select>
</div>
Each time you submit the form, get the currently selected value from the select menu and save it to localStorage. Each time the page is created, read the value from localStorage and then remove it from the options list:
$(document).on("pagecreate", "#page1", function(){
RemovePreviouslySelected();
$("#btnSubmit").on("click", function(){
var selVal = $("#selCar").val();
localStorage.setItem("selectedCar", selVal);
});
});
function RemovePreviouslySelected(){
var prev = localStorage.getItem("selectedCar");
if (prev){
$("#selCar option").each(function(index){
if ($(this).prop("value") == prev){
$(this).remove();
return;
}
});
}
}

Unable to scroll select options in modal dialog (Chrome)

I have a form within a dialog that has a large number of select option elements. This works fine in IE and FF, but in Chrome, I am unable to scroll through the options. I can select them by selecting an option, then after the options collapse back down, use the arrow keys to go through the list. I am using Chrome Version 32.0.1700.76 and jQuery 1.9.1. I did attempt it using 1.10.2 as well and it did not fix the problem. My fiddle example uses 1.9.1 because selecting 1.10.2 did not allow be to include jQuery UI 1.9.2. You can even see in fiddle that the framework select input is not scrollable. Thanks.
http://jsfiddle.net/4mH8a/19/
HTML:
<form>
<input type="button" value="Open Modal" onclick="$('#divSelect').dialog('open');" />
</form>
<div id="divSelect" style="display:none">
<form>
<select name="lotsofoptions">
<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>
<option value="6">option 6</option>
<option value="7">option 7</option>
<option value="8">option 8</option>
<option value="9">option 9</option>
<option value="10">option 10</option>
<option value="11">option 11</option>
<option value="12">option 12</option>
<option value="13">option 13</option>
<option value="14">option 14</option>
<option value="15">option 15</option>
<option value="16">option 16</option>
<option value="17">option 17</option>
<option value="18">option 18</option>
<option value="19">option 19</option>
<option value="20">option 20</option>
<option value="21">option 21</option>
<option value="22">option 22</option>
<option value="23">option 23</option>
<option value="24">option 24</option>
<option value="25">option 25</option>
<option value="26">option 26</option>
<option value="27">option 27</option>
<option value="28">option 28</option>
<option value="29">option 29</option>
<option value="30">option 30</option>
</select>
</form>
</div>
JS:
$(document).ready(function(){
// Modal dialogs
$('#divSelect').dialog( { autoOpen:false,
modal: true,
title: 'Unable to scroll',
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
}
} );
});

Resources