We Keep Coding

Programmatically select next/previous option in select 2, with sorter applied

I have a select2 that uses the sorter option to sort options alphabetically, and a button that should select the next option after the currently selected option. All of this works as desired except the button does not select the next (alphabetical) choice in the select2, which is what I would like; instead it selects the next <option> element in the underlying <select> that drives the select2. These <option>'s are not sorted alphabetically. Obviously I could manipulate the DOM to sort them alphabetically, but that sort of defeats the purpose of leveraging the sorter option. Is there any way to identify the option that comes after the currently selected one, in the sorted list?
HTML
<select id="employeeSelect">
<option value="abc">Diane Smith</option>
<option value="xyz">Tim Carter</option>
<option value="dmv">Keith Appleton</option>
<option value="r2d2">Carla Peters</option>
</select>
<button id="nextEmployee">Next</button>
JS
$('#employeeSelect').select2({
placeholder: '-- select an employee --',
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
})
$('#nextEmployee').on('click', function(){
$("#employeeSelect > option:selected")
.prop("selected", false)
.next()
.prop("selected", true);
$('#employeeSelect').trigger('change');
})

I didn't find any documentation on this, but from inspecting the select2 element's data properties, it appears that the sorted list is not held in the select2's internal data in any way (I think it is generated on the fly when the dropdown is clicked); therefore, this is probably not possible other than by sorting the <option> tags.
So my current solution looks like this:
$('#nextEmployee').on('click', function(){
const isBefore = function (a, b)
{
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()) < 0
}
const selectedOption = $("#employeeSelect > option:selected")
const nextOption = $('#employeeSelect').find('option').toArray()
.reduce(function (acc, thisOption)
{
if (isBefore(selectedOption, thisOption)
&& (!acc || isBefore(thisOption, acc)))
{
return thisOption
} else
{
return acc
}
}, null)
if (nextOption)
{
selectedOption.prop("selected", false)
$(nextOption).prop("selected", true);
$('#employeeSelect').trigger('change');
}
}

How to make already selected option not display in another select option dropdown JAVASCRIPT/ANGULARJs

How to make a select option not disappear when selected if filtered out and not be displayed on other select dropdowns.
For example
if i have some array of objects, and i make
<select ng-options = "here we go through each object "></select>
My idea is to make filter function that would not display any item that's in the array i'm filling if I selected this item before. So that would be my array of items that should be unavailable in another dropdowns. Is there some example way how can i accomplish that? I have an idea that my filter would look something like this:
for(var i=0;i<$scope.removedIds.length;i++){
if(tab.tabID===$scope.removedIds[i].tabID)
return false;
}
return tab;
and this would be used in ng-options for ex: ng-options="tab.ID as tab.name for tab in tables | filter: "
and in my function ng-change i would be adding to $scope.removedIds next values that should not be available in next select dropdowns. But I think it would not work because values would be filter out in different select dropdowns.
Example

I guess that you have three dropdowns with same datasource, a simple solution would look like:
<div>
<select ng-model="selectedItem1" ng-options="item1 for item1 in options1"></select>
<select ng-model="selectedItem2" ng-options="item2 for item2 in options2"></select>
<select ng-model="selectedItem3" ng-options="item3 for item3 in options3"></select>
</div>
In the corresponding controller, and using angularjs watchers, add these lines:
$scope.options1 = ["opt1","opt2","opt3"];
$scope.options2 = angular.copy($scope.options1);
$scope.options3 = angular.copy($scope.options1);
$scope.$watch("selectedItem1", function(nv, ov) {
if (nv != ov) {
$scope.options2.splice($scope.options2.indexOf(nv),1);
$scope.options3.splice($scope.options3.indexOf(nv),1);
}
});
$scope.$watch("selectedItem2", function(nv, ov) {
if (nv != ov) {
$scope.options1.splice($scope.options1.indexOf(nv),1);
$scope.options3.splice($scope.options3.indexOf(nv),1);
}
});
$scope.$watch("selectedItem3", function(nv, ov) {
if (nv != ov) {
$scope.options1.splice($scope.options1.indexOf(nv),1);
$scope.options2.splice($scope.options2.indexOf(nv),1);
}
});

JQuery get the value of the newly selected/unselected element of a select [duplicate]

I have a HTML select list, which can have multiple selects:
<select id="mySelect" name="myList" multiple="multiple" size="3">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option> `
<option value="4">Fourth</option>
...
</select>
I want to get an option's text everytime i choose it. I use jQuery to do this:
$('#mySelect').change(function() {
alert($('#mySelect option:selected').text());
});
Looks simple enough, however if select list has already some selected options - it will return their text too. As example, if i had already selected the "Second" option, after choosing "Fourth" one, alert would bring me this - "SecondFourth". So is there any short, simple way with jQuery to get only the "current" selected option's text or do i have to play with strings and filter new text?

You could do something like this, keeping the old value array and checking which new one isn't in there, like this:
var val;
$('#mySelect').change(function() {
var newVal = $(this).val();
for(var i=0; i<newVal.length; i++) {
if($.inArray(newVal[i], val) == -1)
alert($(this).find('option[value="' + newVal[i] + '"]').text());
}
val = newVal;
}); ​
Give it a try here, When you call .val() on a <select multiple> it returns an array of the values of its selected <option> elements. We're simply storing that, and when the selection changes, looping through the new values, if the new value was in the old value array ($.inArray(val, arr) == -1 if not found) then that's the new value. After that we're just using an attribute-equals selector to grab the element and get its .text().
If the value="" may contains quotes or other special characters that would interfere with the selector, use .filter() instead, like this:
$(this).children().filter(function() {
return this.value == newVal[i];
}).text());

Set a onClick on the option instead of the select:
$('#mySelect option').click(function() {
if ($(this).attr('selected')) {
alert($(this).val());
}
});

var val = ''
$('#mySelect').change(function() {
newVal = $('#mySelect option:selected').text();
val += newVal;
alert(val); # you need this.
val = newVal;
});
or let's play some more
val = '';
$('#id_timezone')
.focus(
function(){
val = $('#id_timezone option:selected').text();
})
.change(
function(){
alert(val+$('#id_timezone option:selected').text())
});
Cheers.

2 multiple select and single option list

I have 2 multi select element and both get options from a variable list.
If a variable selected as row variable it will not be shown in column select options. if user unselect option then variable should will shown in both list
$scope.variables = ['a','b','c','d','e','f'];
<select multiple ng-model="selectedAsRows" ng-options="v for v in variables"></select>
<select multiple ng-model="selectedAsCols" ng-options="v for v in variables"></select>

I think that I understood what you want. Here is a fiddle with an example:
http://jsfiddle.net/26fZb/209/
The key is to use a custom filter like this one:
filter: { name: '!' + selectedAsFriend.name }
EDIT:
Here is your case with multiSelect. I have created custom filters.
app.filter('myFilter', function() {
return function(inputList, list) {
return inputList.filter(isAlreadySelected(list));
};
function isAlreadySelected(list){
return function(elem){
if (list.indexOf(elem) == -1)
return true;
else
return false;
}
}
});
Then to use it in the html file:
<select multiple ng-model="selectedAsRows" ng-options="v for v in variables | myFilter: selectedAsCols"></select>
<select multiple ng-model="selectedAsCols" ng-options="v for v in variables | myFilter: selectedAsRows"></select>
Take a look at the full code:
http://plnkr.co/edit/6eWZB75dAdquPD1jMmb7?p=preview

Javascript array select option

I have a problem with my Javascript code, I have a select and I add the value of the selected option (for example Volvo) in an array but when the user change the selected option (for example Lamborghini). I want to delete the last selected option in the array and add the newest in that.
How Can I do it ?
For information, I have multiple select option and I call the function changeClass()
Thank you for your helps
My HTML code
<select class="form-control" id="car" onchange="changeClass(this)">
<option value="1">Volvo</option>
<option value="2">VW</option>
<option value="3">Lamborghini</option>
</select>
My Javascript code
<script>
var data = [];
function changeClass(select) {
data.push(select.value);
}
</script>

use this in common select function, it will get all selected value into one array
var data;
$("select").change(function () {
data = $("select").map(function () {
return this.value;
}).get();
console.log(data)
});
DEMO

You can simply empty the array by re-defining it to empty array:
function changeClass(select) {
data = [];
data.push(select.value);
}

Just use splice to replace the last element with the new one:
var arr = ["aaa", "bbb", "ccc"];
arr.splice(arr.length - 1, 1, "ddd");
console.log(arr);
logs:
["aaa", "bbb", "ddd"]

If the item was added just before the new item then you can do something like this:
<script>
var data = [];
function changeClass(select) {
data.pop();
data.push(select.value);
}
</script>
If you wish to remove the item which was not added just before then you'll have to use event onfocus, grab the previously selected value and delete it when onchange event is fired.