We Keep Coding

Is it possible to get a reference of the array of selected values on a Select2?

I have a select2 which is multiple select.
There are two ways to select an option:
Type and choose on the select box,
There is a menu on which you can click and it will add it to the select2 select box.
It's not properly working this time, but I can already select options using the menu.
What I want to know is, is it possible for me to have a reference of the array of selected values?
Because what I am doing right now is,
I have an array called, selectedValuesArray,
where when I select from the menu, it will push the id of the selection to the selectedValuesArray and
$('#selectbox').val(selectedValuesArray).trigger("change");
So can I just have a reference on the array of the selected value itself so I'll just push and splice items there?
EDIT:
Select2.val() is an array.
I want to have a reference to that array like,
var selectionArray = Select2.val();
And I want to manipulate that array dynamically.
// like adding a selection
selectionArray.push("1");
// or removing a selection
selectionArray.splice(indexOf("1"), 1);
Is it possible?

If I've understood your question properly, you're after something like this:
$("#e1").select2();
$("#checkbox").click(function () {
if ($("#checkbox").is(':checked')) {
$("#e1 > option").prop("selected", "selected");
$("#e1").trigger("change");
} else {
$("#e1 > option").removeAttr("selected");
$("#e1").trigger("change");
}
});
$("#button").click(function() {
console.log($("#e1").val());
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" />Select All
<input type="button" id="button" value="Check Selected" />
Original fiddle can be found here.

Alright I have managed to achive what you want. Here is the code;
var selectedArray = $('#selectbox').val();
var selectElem = $('#selectbox').select2();
//delete '42' from array
var index = selectedArray.indexOf('42');
data.splice(index,1);
selectElem.val(selectedArray);
selectElem.trigger('change');
//add '52' to array
selectElem.push('52');
selectElem.val(selectedArray);
selectElem.trigger('change');
Hope this helps :)

Button to add selected="selected" from outside form

I am using laravel, and trying to integrate some jquery, which I am not very good at.
I have a multiple select box with potentially lots of options, based on database values.
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
The user can select tools directly from the select box, but this can be a huge list and therefore I am also displaying a search field below the select box to
search the database of tools so the user can see more info about the tool, and then decide if he wants to include it.
Currently the user has to first search, then find the entry in the select box and select it.
I want a faster solution with a button next to the info about the tool, that automatically adds selected="selected" to the correct option in the select box above.
I tried
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$("div.toolselect select").val(id);
}
But that erased all the other other selected fields.
Any ideas would be appreciated.

Try using jQuery's prop function:
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$('.toolselect select option[value="'+ id +'"]').prop('selected');
}
</script>

For a multi-select, the value is an array of all the selected items. You're just setting the value to a single item, which is treated as an array of one element, so all the other selections get discarded.
So you should get the old value, add the new ID to it, and then set that as the new value.
function addselect(id) {
$('.toolselect select').val(function(i, oldval) {
oldval = oldval || []; // oldval = null when nothing is selected
oldval.push(id);
return oldval;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
<input type="button" value="Select 1" onclick="addselect('1')"/>
<input type="button" value="Select 2" onclick="addselect('2')"/>
<input type="button" value="Select 3" onclick="addselect('3')"/>

Instead of using this :
addselect = function (id){
$("div.toolselect select").val(id);
}
Try this :
addselect = function(id) {
var temp = [];
var arr = $('select').val();
for(i=0;i<arr.length;i++){
temp.push(arr[i]);
}
temp.push(id);
$("div.toolselect select").val(temp);
}
This way your previous selection is preserved, and the new selection is appended to the previous selection.
Hope this helps.

Show the result of the dropdown selected value after the clicked button

I need to set up a simple list box that shows a result on the same page after the button is pressed. For example, the code below shows a list of the 7 days with times for each day. Right now when the button is pressed, I get a pop up saying "The page at "**.com" says: 7-9".
How can I have the result simply display "7-9" below the button, without a pop-up?
<script>
function displayResult()
{
var x=document.getElementById("mySelect").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
</script>
</head>
<body>
<form>
Select a day:
<select id="mySelect">
<option value="8-8">Monday</option>
<option value="7-9">Tuesday</option>
<option value="7-9">Wednesday</option>
<option value="7-9">Thursday</option>
<option value="7-10">Friday</option>
<option value="10-10">Saturday</option>
<option value="10-5">Sunday</option>
</select>
</form>
<button type="button" onclick="displayResult()">Display result</button>
http://jsfiddle.net/78NKt/

Try this way using insertBefore and function.call to have the context inside the function set as that of the element itself. And additionally you can just get the value of select using element.value (much shorter):
function displayResult() {
var x = document.getElementById("mySelect");
this.parentNode.insertBefore(document.createTextNode(x.value), this.nextSibling);
}
and
<button type="button" onclick="displayResult.call(this)">Display result</button>
Demo

Check dropdown before submit

I use this code to check if dropdown opton is selected before submit.
On my page I have 3 dropdown menus, but only the first works correctly.
Is there a way to extend function for the 2nd and 3rd dropdowns?
My script:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var year = $('#year option:selected').val();
if(year == "")
{
$("#msg").html("Please select a year");
return false;
}
});
});
</script>
My HTML:
<div id="msg"></div>
<form method="post" action="">
<select id="year">
<option value="">OLLA</option>
<option>1991 </option>
<option>1992 </option>
<option>1993 </option>
<option>1994 </option>
<option>1995 </option>
</select>
<div id="msg"></div>
<form method="post" action="">
<select id="year">
<option value="">OLLA</option>
<option>1991 </option>
<option>1992 </option>
<option>1993 </option>
<option>1994 </option>
<option>1995 </option>
</select>
<input type="submit" name="submit" id="submit">
</form>

ID's should be unique and only used once. I advise you to give them all the class msg instead, e.g.
<div class="msg"></div>
...
<div class="msg"></div>
Also, give your selects a class too instead, for the same reason, both:
<select class="year">
Your jQuery would also be changed to:
<script type="text/javascript">
$(document).ready(function(){
$(".submit").click(function(){
var year = $('.year option:selected').val();
if(year == "") {
$(".msg").html("Please select a year");
return false;
}
});
});
</script>

If you put the listener on the form, it will be this within the function so you can just do something like:
$("<form selector>").click(function(){
if (this.year.value == "") {
$("#msg").html("Please select a year");
return false;
} else {
$("#msg").html("");
}
})
You could also check whether the selected index is greater than zero. If it's zero or -1, then either the first or no option is selected (respsectively).
You should turn the ID attributes into NAME attributes, then you can repeat them (and they will be successful when the form is submitted).
Oh, and never name a form control "submit" as it will shadow the form's submit method, making it impossible to call it.

Because Ids of both element are same so selector works with first id match this case .Try to use different ids or USe Class Instead of ID
or use the jquery each function http://api.jquery.com/each/

You could, of course, set an action on the DDL to ensure that a value has been set (enabling the submit button afterwards) thus putting the emphasis of validation directly on the control itself, rather than the submit button. (Just another way of skinning the same cat!)

goto url using javascript on Select box | DropDown box

I have the below javascript function to go to the selected box value url.
function go(x) {
alert(x);
location = x.value;
}
I cannot use getElementById
There may be more than 1 select box as the user differs
I wrote a php to print all the selectbox inside a form and div
<div class="styled-select">
<form name="menu">
<select id=Admission onchange=go(this)>
<option value=/admission>Add Existing Students</option>
</select>
<select id=Student onchange=go(this)>
<option value=www.bing.com>Student Details</option>
</select>
</form>
</div>
All suggestions are welcome.

You don't access the value of the element properly. Use this instead:
function go(x) {
location = x.options[x.selectedIndex].value;
}
You also won't get an onchange event for a <select> with only a single option ever.