We Keep Coding

Displaying multiple Select Values into an alert? [duplicate]

This question already has answers here:
How to get all selected values of a multiple select box?
(28 answers)
Closed 5 years ago.
I'm still a beginner hence this is difficult, but how do I display the options I selected into an alert box. So it would be "You selected (value), (value), (value)".
This is my select list
<form id='form1'>
<select id="options" multiple >
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>
Should I add a button. But what I'm struggling with is the javascript.

The easiest way to access selected elements of a select tag is with the "selectedOptions" property.
I would do it this way:
var form = document.getElementById('form1');
form.addEventListener('submit', function () {
var select = form.querySelector('#options'),
options = select.selectedOptions,
values = [];
for (var i = options.length - 1; i >= 0; i--) {
values.push(options[i].value);
}
alert('You selected: ' + values.join(', '));
}, false);

Try something like this:
function selectedValues()
{
var x=document.getElementById("options");
var selectedValues= '';
for (var i = 0; i < x.options.length; i++) {
if(x.options[i].selected ==true){
selectedValues += x.options[i].value + ", ";
}
}
alert("You selected: "+ selectedValues.slice(0, -2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form1'>
<select id="options" multiple onchange="selectedValues()">
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>

how to add selected values from two <select> tag and show sum in third <select>

$(document).ready(function () {
var presentyear = new Date().getFullYear();
for(y = 1995; y <= presentyear; y++)
{
var optn = document.createElement("option");
optn.text = y;
optn.value = y;
document.getElementById('year10').options.add(optn);
}
});
<select id="year10">
<option>select year</option>
//all the values will be dynamically added as called by function in js
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<select id="year12">
<option id="calvalue"> </option>
</select>
I want to save selected values from two select tags and show the sum in a separate third select dropdown.
As in the snippet above, I have three select tags, the javascript code fills the options for 'year10' select from 1995 to 2017.
The 'gap' select have 5 values.
Now, i want to add the selected values of 'year10' and 'gap' and show in the single option (with id='calvalue') in 'year12' select tag.
Also, when i change the values in either first two selects, the summed value in year12 must change with it.
How to do this?
Any help is appreciated

To achieve this you just need to add a change event handler to both of the selects which reads the values and adds them together.
Note that putting the result in another option of a select is a little odd. I'd suggest using a readonly text box instead, something like this:
$(function() {
var presentyear = new Date().getFullYear(), options = '';
for (y = 1995; y <= presentyear; y++) {
options += '<option value="' + y + '">' + y + '</option>';
}
$('#year10').append(options);
$('#year10, #gap').change(function() {
var year = parseInt($('#year10').val(), 10) || 0;
var gap = parseInt($('#gap').val(), 10) || 0;
$('#year12').val(!year ? '' : year + gap);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
<option>select year</option>
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<input type="text" readonly="readonly" id="year12">

if you're ok with jquery... then
<select id="num1" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="num2" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="res">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<script>
function addThem(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
$("#res").val(Number(num1) +Number(num2));
}
</script>
this Plunker sample i did should help you out

function jsFunction(){
var myselect = document.getElementById("selectOpt");
$("#secondselectbox").val(myselect);
}
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondselectbox">
</select>
In this code After value selection you can do any new function(another select tag).

You will have to work on the specifics your self, but this should get you started.
let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
if (selector === 'first') {
nextOption.first = parseInt(option.value);
}
else if (selector === 'seccond') {
nextOption.seccond = parseInt(option.value);
}
let newOption = document.createElement("option");
newOption.text = nextOption.first + nextOption.seccond;
document.getElementById('final').add(newOption);
}
selected();
<select onClick="selected('first', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select onClick="selected('seccond', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="final">
</select>

Javascript - IE11 - void results with querySelectAll()

I have an issue with a simple js function on IE (11 and lower). When I use document.querySelector('#id').querySelectorAll('option') where #id is linked to a element, it return an array of options, but "void" like
<option id="id"></options>
my very simple JS :
var projectsList = document.querySelector('#taskproject').querySelectorAll('option');
console.dirxml(projectsList);
and my HTML code (an exemple) :
<select id="taskproject" name="newproject">
<option id="1">Project1</option>
<option id="2">Project2</option>
[...]
<option id="99">Project99</option>
</select>
This will return, with the console.dirxml function in the IE11 console
<NodeList lenght="99">
<option id="1"></option>
[....]
<option id="99"></option>
</NodeList>
This works on chrome, the text inside options is written on the console.
Thanks for your help!
Edit with runnable example
var projectsList = document.querySelector('#taskproject').querySelectorAll('option');
function giveSelection(appId)
{
var appSelector = document.querySelector('#taskapp');
var projectSelector = document.querySelector('#taskproject');
projectSelector.innerHTML = '';
if(projectSelector != null)
{
for(var i=0; i<projectsList.length; i++)
{
if(projectsList[i].id.split('_')[1] === appId)
{
projectSelector.appendChild(projectsList[i]);
}
}
}
}
<select id="taskapp" name="new_app_id" onchange="giveSelection(this.value)">
<option value="55" >Proj1</option>
<option value="33" >Proj2</option>
<option value="62" >Proj3</option>
<option value="69" >Proj4</option>
</select>
<select id="taskproject" name="new_project_id">
<option id="appWithProject_55" value="239" >Proj1 - a</option>
<option id="appWithProject_55" value="273" >Proj1 - b</option>
<option id="appWithProject_55" value="289" >Proj1 - c</option>
<option id="appWithProject_33" value="106" >Proj2 - a</option>
<option id="appWithProject_33" value="105" >Proj2 - b</option>
<option id="appWithProject_62" value="263" >Proj3 - a</option>
<option id="appWithProject_62" value="264" >Proj3 - b</option>
<option id="appWithProject_69" value="285" >Proj4 - a</option>
<option id="appWithProject_69" value="286" >Proj4 - b</option>
</select>
Here, if I choose Proj2 on first select, it will show me only Proj2 - a and Proj2 - b on the second select (on chrome). On IE11, it will show me 2 "options" with no text inside.

The problem is that IE has a very strange behavior when you set innerHTML. It removes the text nodes of the elements it's removing. This is non-standard, and arguably a bug. (In fact, I seem to recall reporting it as a bug at one point.)
You can work around it by not using innerHTML = '' to clear the select, but instead using removeChild:
var projectsList = document.querySelector('#taskproject').querySelectorAll('option');
function giveSelection(appId)
{
var appSelector = document.querySelector('#taskapp');
var projectSelector = document.querySelector('#taskproject');
if(projectSelector != null)
{
// Not this: projectSelector.innerHTML = '';
while (projectSelector.firstChild) {
projectSelector.removeChild(projectSelector.firstChild);
}
for(var i=0; i<projectsList.length; i++)
{
if(projectsList[i].id.split('_')[1] === appId)
{
projectSelector.appendChild(projectsList[i]);
}
}
}
}
<select id="taskapp" name="new_app_id" onchange="giveSelection(this.value)">
<option value="55" >Proj1</option>
<option value="33" >Proj2</option>
<option value="62" >Proj3</option>
<option value="69" >Proj4</option>
</select>
<select id="taskproject" name="new_project_id">
<option id="appWithProject_55" value="239" >Proj1 - a</option>
<option id="appWithProject_55" value="273" >Proj1 - b</option>
<option id="appWithProject_55" value="289" >Proj1 - c</option>
<option id="appWithProject_33" value="106" >Proj2 - a</option>
<option id="appWithProject_33" value="105" >Proj2 - b</option>
<option id="appWithProject_62" value="263" >Proj3 - a</option>
<option id="appWithProject_62" value="264" >Proj3 - b</option>
<option id="appWithProject_69" value="285" >Proj4 - a</option>
<option id="appWithProject_69" value="286" >Proj4 - b</option>
</select>
Side note: You also had the innerHTML thing before the if (projectSelector != null) check. I've put it inside that if's body instead.

Why select options created by JS are limited or are not shown?

A very interesting thing hapens to my code.I have 3 different selects,one for years, the second for months and the third for days.I created options for the years and days via JS. My problem is my years list starts from the start point but dosn't end in the finish point I give,but when I'm changing the start point of j to 300 for instance, everything works perfectly.What is the reason or maybe my code is not correct? https://jsfiddle.net/arminemash/f9gy1p4L/15/
select{float:left}
#month,#days,input{display:none}
<body onload='addOptions()'>
<form action=''>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select required id='days' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
</select>
<input type="submit" class='selectOption' onclick='getDate()'>
</form>
</body>
function addOptions(){
var x= document.getElementById('year');
var y = document.getElementById('days');
for(var i=1900,j=1;i<3000,j<=31;i++,j++){
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.text =i;
x.add(option1);
option2.text =j;
y.add(option2);
}
}
var i=0;
function select(par){
var x=document.getElementsByClassName('selectOption');
if( par.selectedIndex !== "0"){
x[i+1].style.display='block';
i++;
collectData.push(par.value);
}
}

The problem is your for loop. for(var i=1900,j=1;i<3000,j<=31;i++,j++) this will stop when j reaches 31. What you need is two for loops one for days and one for years. I edited your fiddle here.

Problem with a days select in javascript

I've a problem with three selects for birth of date (Day,Month,Year) in IE. This is the HTML.
<li><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobMonth" id="dobMonth" onchange="getDays();">
<option value="01">Jan</option>
<option value="02">Fev</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="dobYear" id="dobYear" onchange="getDays();">
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
</select>
</li>
and I have a javascript code to count number of days in every month/year
function getDays()
{
var month = document.getElementById("dobMonth").options[document.getElementById("dobMonth").selectedIndex].value;
var year=document.getElementById("dobYear").options[document.getElementById("dobYear").selectedIndex].value;
var daysoutput;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
var j = 31;
}
else if (month == 4 || month == 6 || month == 9 || month == 11){
var j = 30;
}
else{
if (year%4==0){
j=29;
}
else{
j=28;
}
}
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
}
with FF, this is okay, but in IE instead after selecting a month/year , the days select becomes empty!
and I don't know why? ,but I doubt the problem is with innerHTML.
thank you

The proper way to add options is using the .add() method of the options collection of the drop down element.
Working example:
window.onload = function WindowLoad() {
var dtNow = new Date();
var year = dtNow.getFullYear();
FillDropDownRange("ddlMonth", 1, 12, dtNow.getMonth() + 1);
FillDropDownRange("ddlYear", year - 5, year, year);
FillDays();
};
function FillDropDownRange(oDDL, rangeStart, rangeEnd, nSelectedValue) {
if (typeof oDDL == "string")
oDDL = document.getElementById(oDDL);
while (oDDL.options.length > 0)
oDDL.removeChild(oDDL.options[0]);
for (var i = rangeStart; i <= rangeEnd; i++) {
var option = new Option();
option.text = i + "";
option.value = i + "";
if (typeof nSelectedValue != "undefined" && i == nSelectedValue)
option.selected = "selected";
oDDL.options.add(option);
}
}
function FillDays() {
var month = parseInt(document.getElementById("ddlMonth").value);
var year = parseInt(document.getElementById("ddlYear").value);
var date = new Date();
date.setDate(1);
date.setMonth(month - 1);
date.setFullYear(year);
var daysCount = 0;
while (date.getMonth() == (month - 1)) {
date.setDate(date.getDate() + 1);
daysCount++;
}
FillDropDownRange("ddlDay", 1, daysCount);
}
<select id="ddlDay"></select> /
<select id="ddlMonth" onchange="FillDays();"></select> /
<select id="ddlYear" onchange="FillDays();"></select>
I also gave "safe" way to get the number of days given specific month and year.

Thank you friends , I've solved the problem and it's now okey with IE:
this is the solution:
I changed this line :
<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay"> in the html code to this
to this ;
<span id="days"><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
as you can see , I've added a container (parent) span to select
then I changed the js code as follows:
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
becomes :
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById("days").innerHTML='<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay">'+daysoutput+'</select></label>';
it may appear that IE doesn't apply the innerHTML to a select tag, then I've added a span tag that contains this select , and changed its innerHTML with javascript
thank you

You can not set the innerHTML of a select element with Internet Explorer.
You should be using new Option().
var sel = document.getElementById("mySelect");
sel.options.length = 0; //removes all options
for(var i=0;i<3;i++){
var newOpt = new Option("text" + i, "value" + i);
sel.options[i] = newOpt;
}
You could also use createElement instead of new Option.

I think you should try to case your option value to string or parseInt to compare. It might fixed your problem. For instance:
if(month == 3)
to
if(month == "3")
or
if(parseInt(month) == 3)