We Keep Coding

How to change the order of elements in listbox and store the values of listbox into an array using javascript

My listbox(MySelectLinks) is fetching values(AllLinks) from javascript array of objects stored in sharepoint list column.My listbox displays values of AllLinks:
[{"AllLinks":"abc","Order":7},{"AllLinks":"ghj","Order":9},{"AllLinks":"abcb","Order":4},{"AllLinks":"ghjnn","Order":1}]
I want to change the order by moving elements up and down and save this new order in array.So that the new order can be saved in list.
The following code changes the order but value cant be retained:
function MoveUp(lst){
if(lst.selectedIndex == -1)
alert('Please select an Item to move up.');
else
{
if(lst.selectedIndex == 0)
{
alert('First element cannot be moved up');
return false
}
else
{
var tempValue = lst.options[lst.selectedIndex].value;
var tempIndex = lst.selectedIndex-1;
lst.options[lst.selectedIndex].value = lst.options[lst.selectedIndex-1].value;
lst.options[lst.selectedIndex-1].value = tempValue;
var tempText = lst.options[lst.selectedIndex].text;
lst.options[lst.selectedIndex].text = lst.options[lst.selectedIndex-1].text;
lst.options[lst.selectedIndex-1].text = tempText;
lst.selectedIndex = tempIndex;
}} return false;}
Code to display values inside listbox:
function populateMyLinks()
{
$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data)
{
var blah = JSON.parse(data.d.results[0].AllLinks);
blah = sortJSON(blah, 'Order');
$.each(blah,function(i,result)
{
option2 += "<option value='" + result.AllLinks+"'>"+result.AllLinks+"</option>"
})
$("#MySelectLinks").append(option2);
},
error: function (data)
{
alert(data.responseJSON.error);
}
});
}

I didn't have time to add some comments to the code but I hope it pretty much explains itself. I hope it does what you're expecting it to do.
/* === ELEMENT MANIPULATION === */
function moveOptionDown(selectElement) {
const
optionElement = selectElement.options[selectElement.selectedIndex],
nextOption = selectElement.options[selectElement.selectedIndex + 1];
nextOption.insertAdjacentElement('afterend', optionElement);
}
function moveOptionUp(selectElement) {
const
optionElement = selectElement.options[selectElement.selectedIndex],
previousOption = selectElement.options[selectElement.selectedIndex - 1];
selectElement.insertBefore(optionElement, previousOption);
}
/* === ELEMENT MANIPULATION === */
/* === ARRAY METHODS === */
function generateOptionArray(selectElement) {
const
options = selectElement.options,
result = [];
for (var index=0; index < options.length; index++) {
result.push({
AllLinks: options[index].textContent,
Order: index
});
}
return result;
}
/* === ARRAY METHODS === */
/* === EVENT HANDLERS === */
function onMoveOptionUp(event) {
const
selectElement = document.getElementById('mySelect');
if (
selectElement.selectedIndex <= 0
) {
console.log('No option, or the first option, is selected. There is nothing to move');
return;
}
moveOptionUp(selectElement);
const
optionsArray = generateOptionArray(selectElement);
console.log(optionsArray);
}
function onMoveOptionDown(event) {
const
selectElement = document.getElementById('mySelect');
if (
selectElement.selectedIndex === -1 ||
selectElement.selectedIndex >= (selectElement.options.length - 1)
) {
console.log('No option, or the last option, is selected. There is nothing to move');
return;
}
moveOptionDown(selectElement);
const
optionsArray = generateOptionArray(selectElement);
console.log(optionsArray);
}
/* === EVENT HANDLERS === */
const
buttonUp = document.getElementById('move-up'),
buttonDown = document.getElementById('move-down');
buttonUp.addEventListener('click', onMoveOptionUp);
buttonDown.addEventListener('click', onMoveOptionDown);
<select id="mySelect">
<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>
</select>
<button type="button" id="move-up">move selected element up</button>
<button type="button" id="move-down">move selected element down</button>

Add new option to dropdown if none of the existing one match certain string exist using javascript

I have this drop down that I compare with an array. If a value in the array matches the text of one of the options in the dropdown, then it is selected:
JS -Step One:
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns ('topicSelect',topicArray);
Dropdown
<select class="topicSelect" multiple>
<optgroup label="Crops">
<option selected="" value=""></option>
<option value="Apiculture">Apiculture</option>
<option value="Apples">Apples</option>
<option value="Aquaculture">Aquaculture</option>
<option value="Blueberries">Blueberries</option>
</optgroup>
<optgroup label="Add Option" class="youOwn">
<option value="own">Add Your Option</option>
</optgroup>
</select>
JS - Step Two:
function populateExistingDropDowns(dd, array) {
var select = document.getElementsByClassName(dd);
for (var d = 0; d < array.length; d++) {
for (var i = 0; i < select[0].options.length; i += 1) {
if (select[0].options[i].text === array[d]) {
select[0].options[i].selected = true;
}
}
}
}
Here comes my issue: The the code showed above works just fine, but I would like to be able to add a new option if an option with the same array value doesn't exist. In the example shown above, there are two values ('Apple' and 'Tomatoes") values in the array. When I iterate through the array and the dropdown, the 'Apple' option is selected, but, how can I then add a new 'Tomatoes' options, and then select it also? Thanks in advance, please let me know if more details are needed.

I would like to be able to add a new option if an option with the same array value doesn't exist..
you can clone an option node modify it and append it to parent node,
in the snippet I added a dedicated function;
function populateExistingDropDowns(dd, array) {
var select = document.getElementsByClassName(dd);
outer:
for (var d = 0; d < array.length; d++) {
for (var i = 0; i < select[0].options.length; i += 1) {
if (select[0].options[i].text === array[d]) {
select[0].options[i].selected = true;
continue outer;
}
//if you haven't matched and are in last loop
if ( i === select[0].options.length - 1) {
addOpt(array[d], select[0].options[i])
}
}
}
}
function addOpt(x,clone){
var node = clone.cloneNode();
node.selected= true;
node.value= node.innerHTML= x;
clone.parentNode.appendChild(node)
}
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns ('topicSelect',topicArray);
<select class="topicSelect" multiple>
<optgroup label="Crops">
<option selected="" value=""></option>
<option value="Apiculture">Apiculture</option>
<option value="Apples">Apples</option>
<option value="Aquaculture">Aquaculture</option>
<option value="Blueberries">Blueberries</option>
</optgroup>
<optgroup label="Add Option" class="youOwn">
<option value="own">Add Your Option</option>
</optgroup>
</select>

One approach, using ES6 syntax is the following:
function populateExistingDropDowns(dd, array) {
// using 'let' rather than 'var' to declare variables,
// using document.querySelector(), rather than
// getElementsByClassName(), because d.qS has support
// in IE8 (whereas it does not support
// getElementsByClassName()); however here we get the
// first element that matches the selector:
let dropdown = document.querySelector('.' + dd),
// retrieving the collection of option elements,
// HTMLSelectElement.options, and converting that
// collection into an Array using Array.from():
options = Array.from(dropdown.options);
// iterating over each of the topics in the passed-in
// array, using Array.prototype.forEach():
array.forEach(function(topic) {
// filtering the array of <option> elements to keep
// only those whose text property is equal to the
// current topic (from the array):
let opts = options.filter(opt => topic === opt.text);
// if the opts Array has a truthy non-zero length:
if (opts.length) {
// we iterate over the returned filtered Array
// and, using Arrow function syntax, set each
// node's selected property to true:
opts.forEach(opt => opt.selected = true);
} else {
// otherwise, if the current topic returned no
// <option> elements, we find the <optgroup>
// holding the 'Crops' and append a new Child
// using Node.appendChild(), and the new Option()
// constructor to set the option-text, option-value
// default-selected property and selected property:
dropdown.querySelector('optgroup[label=Crops]')
.appendChild(new Option(topic, topic, true, true));
}
});
}
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns('topicSelect', topicArray);
function populateExistingDropDowns(dd, array) {
let dropdown = document.querySelector('.' + dd),
options = Array.from(dropdown.options);
array.forEach(function(topic) {
let opts = options.filter(opt => topic === opt.text);
if (opts.length) {
opts.forEach(opt => opt.selected = true);
} else {
dropdown.querySelector('optgroup[label=Crops]')
.appendChild(new Option(topic, topic, true, true));
}
});
}
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns('topicSelect', topicArray);
<select class="topicSelect" multiple>
<optgroup label="Crops">
<option value="Apiculture">Apiculture</option>
<option value="Apples">Apples</option>
<option value="Aquaculture">Aquaculture</option>
<option value="Blueberries">Blueberries</option>
</optgroup>
<optgroup label="Add Option" class="youOwn">
<option value="own">Add Your Option</option>
</optgroup>
</select>
JS Fiddle demo.
To recompose the above, using ES5:
function populateExistingDropDowns(dd, array) {
// using 'var' to declare variables:
var dropdown = document.querySelector('.' + dd),
// using Array.prototype.slice(), with
// Function.prototype.call(), to convert the collection
// of <option> element-nodes into an Array:
options = Array.prototype.slice.call(dropdown.options, 0);
array.forEach(function(topic) {
// using the anonymous functions available to the
// Array methods, rather than Arrow functions,
// but doing exactly the same as the above:
var opts = options.filter(function(opt) {
return topic === opt.text
});
if (opts.length) {
opts.forEach(function(opt) {
opt.selected = true;
});
} else {
dropdown.querySelector('optgroup[label=Crops]')
.appendChild(new Option(topic, topic, true, true));
}
});
}
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns('topicSelect', topicArray);
function populateExistingDropDowns(dd, array) {
var dropdown = document.querySelector('.' + dd),
options = Array.prototype.slice.call(dropdown.options, 0);
array.forEach(function(topic) {
var opts = options.filter(function(opt) {
return topic === opt.text
});
if (opts.length) {
opts.forEach(function(opt) {
opt.selected = true;
});
} else {
dropdown.querySelector('optgroup[label=Crops]')
.appendChild(new Option(topic, topic, true, true));
}
});
}
var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns('topicSelect', topicArray);
<select class="topicSelect" multiple>
<optgroup label="Crops">
<option value="Apiculture">Apiculture</option>
<option value="Apples">Apples</option>
<option value="Aquaculture">Aquaculture</option>
<option value="Blueberries">Blueberries</option>
</optgroup>
<optgroup label="Add Option" class="youOwn">
<option value="own">Add Your Option</option>
</optgroup>
</select>
JS Fiddle demo.
References:
Array.from().
Array.prototype.filter().
Array.prototype.forEach().
Arrow functions.
document.querySelector().
HTMLOptionElement.
HTMLSelectElement.
let statement.
Node.appendChild().
Option() Constructor.
var statement.

Thank you all that responded to my question. I ended up using this instead:
function populateExistingDropDowns(dd, array) {
var select = document.getElementsByClassName(dd);
var opt = document.createElement('option');
for (var d = 0; d < array.length; d++) {
for (var q = 0; q < select[0].length; q++) {
if (select[0].options[q].text !== array[d]) {
opt.value = array[d];
opt.text = array[d];
select[0].children[1].appendChild(opt);
opt.selected = true;
} else {
select[0].options[q].selected = true;
}
}
}
}
Fiddle

Javascript select individual option

I have been trying lately to make a function that on change on the select box it return only the selected option value.
My markup looks like this:
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>
and the javascript function:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
for (var i = 0; i < x.length; i++) {
var newX = x[i].value;
console.log(newX);
}
}, false);
What I am trying to do is when I click on 7 days to return only 7 days.

Don't read the <option>s. Read the <select>.
document.getElementById('rangeSelector').value
Other interesting bits include .selectedIndex and .selectedOptions.
(Of course, as Abhitalks notes in the comments, in your handler, the element getting will already done for you.)

var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
console.log(rangeSelector.value);
}, true);
You do not need for loop for that, after firing event "change" rangeSelector.value already have value of chosen element.
so if you wanna add "active" to selected option you can do same:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);
but you should remove "active" class from all non-active, by looping them:)
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
for (var i = 0; i < x.length; i++) {
x[i].className = ""; //or x[i].removeAttribute("class");`
}
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);

You could use jQuery for this, example:
$("#rangeSelector").on("change", function() {
var rangeSelect = document.getElementById("rangeSelector");
var value = selectJaar.options[rangeSelect.selectedIndex].value;
return value;
});
This first gets the dropdown, then get the selected value, and return it.

Try simply using this.value:
document.getElementById('rangeSelector').addEventListener('change', function(e) {
alert(this.value);
});
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>

javascript - drop down display on the second field based on selection in first field

I have two fields customer category and customer type,
when I select one element in customer category , I need to display only a set of elements from customer type in the drop down and rest should not appear.
how do write it in javascript. Here is the one I tried but it doesnot yield proper result.
var custcategory = document.getElementById("custcatid");
var custtypes = document.getElementById('custtypeid').options;
alert('yes');
var n = custtypes.length;
var allowedtype;
if (custcategory.options[custcategory.selectedIndex].value == "ANALOGUE") {
alert('ANALOGUE');
allowedtype = 'CATV,CATV RURAL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "COMMERCIAL") {
alert('COMMERCIAL');
allowedtype = ' ,3ST HOTEL,4ST HOTEL,5ST HOTEL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DAS") {
alert('DAS');
allowedtype = ' ,DAS PHASE1,DAS PHASE2,DAS PHASE3,DAS PHASE4';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DTH") {
alert('DTH');
allowedtype = ' ,DTH';
}
var idx = 0;
for (var i = 0; i < n; i++) {
var type = custtypes[i].value;
var found = allowedtype.search(type);
if (found <= 0) {
custtypes[i].style.display = 'none';
}
else if (idx == 0) {
idx = 1;
document.getElementById('ctl00_uxPgCPH_custtype').selectedIndex = i;
}
}
alert('Done..!');

If I understand correctly, you are trying to filter a second select element based on what is selected in the first select element?
If so I put together the following snippet which might help you out. It can be probably be optimised further but it should help to get you started I feel.
(function () {
var CLASSES = {
categories: '.select__category',
types : '.select__types'
},
map = {
ANALOGUE: [
'CATV',
'CATV RURAL'
],
COMMERCIAL: [
'3ST HOTEL',
'4ST HOTEL',
'5ST HOTEL'
],
DAS: [
'DAS PHASE 1',
'DAS PHASE 2',
'DAS PHASE 3'
]
},
categorySelect = document.querySelector(CLASSES.categories),
typeSelect = document.querySelector(CLASSES.types),
filterTypes = function(val) {
// Based on a value filter the types select.
var opts = typeSelect.options,
allowedOpts = map[val];
typeSelect.value = allowedOpts[0];
for(var i = 0; i < opts.length; i++) {
if (allowedOpts.indexOf(opts[i].value) === -1) {
opts[i].hidden = true;
} else {
opts[i].hidden = false;
}
}
};
filterTypes(categorySelect.value);
categorySelect.addEventListener('change', function(e) {
filterTypes(this.value);
});
}());
<!DOCTYPE html>
<head></head>
<body>
<select id="categories" class="select__category">
<option value="ANALOGUE">Analogue</option>
<option value="COMMERCIAL">Commercial</option>
<option value="DAS">Das</option>
</select>
<select id="types" class="select__types">
<option value="CATV">Catv</option>
<option value="CATV RURAL">Catv Rural</option>
<option value="3ST HOTEL">3st Hotel</option>
<option value="4ST HOTEL">4st Hotel</option>
<option value="5ST HOTEL">5st Hotel</option>
<option value="DAS PHASE 1">Das Phase 1</option>
<option value="DAS PHASE 2">Das Phase 2</option>
<option value="DAS PHASE 3">Das Phase 3</option>
</select>
</body>
If you run the snippet, you'll see that making changes to the first will update the second select accordingly based on the defined map.
Hope this can help you out!

select multiselect option limit up to 2

I am using multiselect for different subject's I want to limit the select up to 2 and make the other's disabled in the same way if user deselect, Again the option must be available for the user.
<select multiple="multiple" class="subjects" name="subjects[]" style="float:left;width:205px;" size="5">
<option value='1'>subject1</option>
<option value='2'>subject2</option>
<option value='3'>subject3</option>
<option value='3'>subject3</option>
</select>
So far I have achieved to deselect only the last option which was selected after 2 and the code is as follow
/**
* Make sure the subject's limit is 2
*/
$(".subjects option").click(function(e){
if ($(this).parent().val().length > 2) {
$(this).removeAttr("selected");
}
});
Thank you.

Improved jQuery example, notice the (else enable) option, this fixes a bug on previous examples that disabled the select options permanently. Also removed the "Please select only two options." error message when possible.
http://jsfiddle.net/c9CkG/25/
jQuery(document).ready(function () {
jQuery("select").on("change", function(){
var msg = $("#msg");
var count = 0;
for (var i = 0; i < this.options.length; i++)
{
var option = this.options[i];
option.selected ? count++ : null;
if (count > 2)
{
option.selected = false;
option.disabled = true;
msg.html("Please select only two options.");
}else{
option.disabled = false;
msg.html("");
}
}
});
});

As an improvment on RobG's answer, you could unselect an option if it makes count > 2.
See: http://jsfiddle.net/c9CkG/3/ for a working example using jQuery.
function checkSelected(el) {
var msgEl = document.getElementById('msg');
var count = 0;
for (var i=0, iLen=el.options.length; i<iLen; i++)
el.options[i].selected? count++ : null;
// Deselect the option.
if (count > 2) {
el.options[i].selected = false;
el.options[i].disabled = true;
msgEl.innerHTML = 'Please select only two options';
}
}

Something like the following will do the job:
function checkSelected(el) {
var msgEl = document.getElementById('msg');
var count = 0;
for (var i=0, iLen=el.options.length; i<iLen; i++)
el.options[i].selected? count++ : null;
msgEl.innerHTML = count > 2? 'Please select only two options' : '';
}
</script>
<span>Please select a maximum of two options:</span>
<select multiple onchange="checkSelected(this);">
<option>0
<option>1
<option>2
<option>3
</select>
<br>
<span id="msg"></span>
I don't think it's a good idea to disable options, you only care that only two are selected when the form is submitted. Until then, it doesn't matter.

$(document).ready(function() {
var last_valid_selection = null;
$('#testbox').change(function(event) {
if ($(this).val().length > 5) {
alert('You can only choose 5!');
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
});
});