Develop Reference

Change div on different select item, not changing back. [NO jquery, only js]

I’m trying to let the use pick an option and by the option they picked there should be a div showing. This is working so far but whenever the user selects another option the old div does not go away.
I’m just starting to use javascript, but I don’t know how to make this happen.
this is my code:
function airplane() {
var vliegtuig = document.getElementById('vliegtuig').value;
if (vliegtuig == 1) {
document.getElementById('vliegtuig_1').style.display = 'block';
} else if (vliegtuig == 2) {
document.getElementById('vliegtuig_2').style.display = 'block';
} else if (vliegtuig == 3) {
document.getElementById('vliegtuig_3').style.display = 'block';
} else if (vliegtuig == 4) {
document.getElementById('vliegtuig_4').style.display = 'block';
} else if (vliegtuig == 5) {
document.getElementById('vliegtuig_5').style.display = 'block';
} else if (vliegtuig == 6) {
document.getElementById('vliegtuig_6').style.display = 'block';
} else if (vliegtuig == 7) {
document.getElementById('vliegtuig_7').style.display = 'block';
} else if (vliegtuig == 8) {
document.getElementById('vliegtuig_8').style.display = 'block';
} else {
document.getElementById('vliegtuig_id').innerHTML = 'Geen waarde';
}
}
.hide {
display: none;
}
<select class="div-toggle" data-target=".my-info-1" name="VliegtuigID" id="vliegtuig" onchange="return airplane()">
<option value="1" data-show="1"> Airbus-A319-100(OO-SSP)</option>
<option value="2" data-show="2"> Airbus-A330-300(OO-SSG)</option>
<option value="3" data-show="3"> AVRO-RJ85(OO-DWE )</option>
<option value="4" data-show="4"> AVRO-RJ85(OO-DWF)</option>
<option value="5" data-show="5"> AVRO-RJ84(OO-DWG)</option>
<option value="6" data-show="6"> Boeing-737-300(OO-VEK)</option>
<option value="7" data-show="7"> Boeing-737-300(OO-VEL)</option>
<option value="8" data-show="8"> Boeing-737-400(OO-VEM)</option>
</select>
<div class="hide" id="vliegtuig_1">1</div>
<div class="hide" id="vliegtuig_2">2</div>
<div class="hide" id="vliegtuig_3">3</div>
<div class="hide" id="vliegtuig_4">4</div>
<div class="hide" id="vliegtuig_5">5</div>
<div class="hide" id="vliegtuig_6">6</div>
<div class="hide" id="vliegtuig_7">7</div>
<div class="hide" id="vliegtuig_8">8</div>

You don't need all those comparisons when you can simply concatenate your selector together. Your JavaScript can be vastly simplified like so, and this accomplishes your goal of hiding the currently visible elements when showing new ones.
var vliegtuig = document.getElementById('vliegtuig');
vliegtuig.addEventListener("change", function() {
// select and hide the currently visible element
var showing = document.querySelectorAll(".vliegtuig.show")[0];
if (showing) {
showing.classList.remove("show");
}
// now show the selected element
var value = vliegtuig.value;
document.getElementById("vliegtuig_" + value).classList.add("show");
});
.vliegtuig {
display: none;
}
.vliegtuig.show {
display: block;
}
<select id="vliegtuig">
<option>Make a selection</option>
<option value="1">Airbus-A319-100(OO-SSP)</option>
<option value="2">Airbus-A330-300(OO-SSG)</option>
<option value="3">AVRO-RJ85(OO-DWE )</option>
<option value="4">AVRO-RJ85(OO-DWF)</option>
<option value="5">AVRO-RJ84(OO-DWG)</option>
<option value="6">Boeing-737-300(OO-VEK)</option>
<option value="7">Boeing-737-300(OO-VEL)</option>
<option value="8">Boeing-737-400(OO-VEM)</option>
</select>
<div class="vliegtuig" id="vliegtuig_1">1</div>
<div class="vliegtuig" id="vliegtuig_2">2</div>
<div class="vliegtuig" id="vliegtuig_3">3</div>
<div class="vliegtuig" id="vliegtuig_4">4</div>
<div class="vliegtuig" id="vliegtuig_5">5</div>
<div class="vliegtuig" id="vliegtuig_6">6</div>
<div class="vliegtuig" id="vliegtuig_7">7</div>
<div class="vliegtuig" id="vliegtuig_8">8</div>

Here is what I would suggest.
function airplane() {
var allElements = document.getElementsByClassName('vliegtuig');
for (var i = 0; i < allElements.length; i++) {
//put the hide class back on the elements that may have had it removed
allElements[i].classList.add('hide');
}
var vliegtuig = document.getElementById('vliegtuig').value;
if (vliegtuig > 0 && vliegtuig < 9) {
//find the one element that should be shown, and remove the hide class
document.getElementById('vliegtuig_'+ vliegtuig.toString()).classList.remove('hide');
} else {
document.getElementById('vliegtuig_id').innerHTML = 'Geen waarde';
}
}
.hide {
display: none;
}
<select class="div-toggle" data-target=".my-info-1" name="VliegtuigID" id="vliegtuig" onchange="return airplane()">
<option value="1" data-show="1"> Airbus-A319-100(OO-SSP)</option>
<option value="2" data-show="2"> Airbus-A330-300(OO-SSG)</option>
<option value="3" data-show="3"> AVRO-RJ85(OO-DWE )</option>
<option value="4" data-show="4"> AVRO-RJ85(OO-DWF)</option>
<option value="5" data-show="5"> AVRO-RJ84(OO-DWG)</option>
<option value="6" data-show="6"> Boeing-737-300(OO-VEK)</option>
<option value="7" data-show="7"> Boeing-737-300(OO-VEL)</option>
<option value="8" data-show="8"> Boeing-737-400(OO-VEM)</option>
</select>
<div class="hide vliegtuig" id="vliegtuig_1">1</div>
<div class="hide vliegtuig" id="vliegtuig_2">2</div>
<div class="hide vliegtuig" id="vliegtuig_3">3</div>
<div class="hide vliegtuig" id="vliegtuig_4">4</div>
<div class="hide vliegtuig" id="vliegtuig_5">5</div>
<div class="hide vliegtuig" id="vliegtuig_6">6</div>
<div class="hide vliegtuig" id="vliegtuig_7">7</div>
<div class="hide vliegtuig" id="vliegtuig_8">8</div>

Normally you hide and show elements by adding and then removing the 'hide' or 'hidden' class.
document.getElementById('vliegtuig_8').className = ""
document.getElementById('vliegtuig_8').className = "hide"
so at the beginning of your function just set all elements to "hide" then unhide 1 of them.
<div class="onlyOne hide" id="vliegtuig_1">1</div>
<div class="onlyOne hide" id="vliegtuig_2">2</div>
<div class="onlyOne hide" id="vliegtuig_3">3</div>
<div class="onlyOne hide" id="vliegtuig_4">4</div>
<div class="onlyOne hide" id="vliegtuig_5">5</div>
<div class="onlyOne hide" id="vliegtuig_6">6</div>
<div class="onlyOne hide" id="vliegtuig_7">7</div>
<div class="onlyOne hide" id="vliegtuig_8">8</div>
<script>
var all = document.getElementsByClassName('onlyOne')
for( item of all){ item.className = 'onlyOne hide'; }
</script>
jQuery has the .addClass() and .removeClass() which make it easier to deal with elements that have more than one class. but if you just have 1 class name this isn't needed.

You should know that if you show one of your div, it won't hide the others.
In order to do that, you need to hide the one that is shown. You could do something like that :
let elementShown;
function airplane() {
if (elementShown)
elementShown.style.display = "none"; // That will hide the last element shown
var vliegtuig = document.getElementById('vliegtuig').value;
if (vliegtuig == 1) {
elementShown = document.getElementById('vliegtuig_1')
}
else if (vliegtuig == 2 ){
elementShown = document.getElementById('vliegtuig_2'}
}
//and so on ....
elementShown.style.display = 'block';
}
I wrote it with your own algorithm but to go further i would wrote airplane like this :
let currentElement; // Variable containing the element visible
function airplane () {
if (currentElement)
currentElement.style.display = "none"; // That will hide the last
var vliegtuig = document.getElementById('vliegtuig').value;
elementShown = document.getElementById('vliegtuig_' + vliegtuig);
elementShown.style.display = 'block';
}

You can try following code which I wrote based your DOM structure:
function airplane() {
var vliegtuig = document.getElementById('vliegtuig').value;
var getDiv = document.getElementsByClassName('hide');
for(var i=0; i<getDiv.length;i++){
getDiv[i].style.display = 'none';
}
document.getElementById('vliegtuig_'+vliegtuig).style.display = 'block';
}

Javascript - added Orange once in fruitslist drop down list

<html>
<head>
<script>
function addfruits()
{
for(i = 0; i < document.getElementById("fruits").options.length; i++)
{
if(document.getElementById("fruits").options[i].selected)
{
var fruitslist = document.getElementById("fruitslist");
var option = document.createElement("option");
option.text = document.getElementById("fruits").options[i].text;
fruitslist.add(option);
}
}
}
</script>
</head>
<body>
<select id="fruits" name="fruits[]" multiple>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
<option value="grape">Grape</option>
</select>
<input type="submit" name="submit" value=">>" onclick="addfruits()" />
<select id="fruitslist" name="fruitslist[]" style="width: 70px;" multiple>
</select>
</body>
</html>
From above code, first I select Orange from drop down list and click >> button, the Orange value will added in fruitslist drop down list. After that. I select Orange again from drop down list and click >> button, the Orange value will added again in fruitslist drop down list. However, I just want the Orange value added in fruitslist drop down list once. How should I modify it? Can someone help me?

Here is the fix.
<html>
<head>
<script>
function addfruits()
{
for(i = 0; i < document.getElementById("fruits").options.length; i++)
{
if(document.getElementById("fruits").options[i].selected && !isAddedAlready(document.getElementById("fruits").options[i].text))
{
var fruitslist = document.getElementById("fruitslist");
var option = document.createElement("option");
option.text = document.getElementById("fruits").options[i].text;
fruitslist.add(option);
}
}
}
function isAddedAlready(text) {
var fruitslist = document.getElementById("fruitslist");
if(fruitslist.length ==0) return false;
for(var i=0; i<fruitslist.length; i++) {
if(fruitslist.options[i].text === text) return true;
}
return false;
}
</script>
</head>
<body>
<select id="fruits" name="fruits[]" multiple>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
<option value="grape">Grape</option>
</select>
<input type="submit" name="submit" value=">>" onclick="addfruits()" />
<select id="fruitslist" name="fruitslist[]" style="width: 70px;" multiple>
</select>
</body>
</html>

Try changing your addFruits function to the following:
function addfruits()
{
for (var i = 0; i < document.getElementById("fruits").options.length; i++)
{
if (document.getElementById("fruits").options[i].selected)
{
var optionText = document.getElementById("fruits").options[i].text;
var fruitslist = document.getElementById("fruitslist");
var found = false;
//Does the item clicked on already exist in the destination list?
for (var j = 0; j < fruitslist.length; j++) {
if (fruitslist[j].text == optionText) {
found = true;
break;
}
}
//If the item does not exist, add it to the list.
if (!found) {
var option = document.createElement("option");
option.text = optionText;
fruitslist.add(option);
}
}
}
}
The important thing to do here is first check that the fruitslist does not contain the item that was clicked on, hence that additional for-loop.

How to get the index of a selected item in listbox and add to listbox two with button?

I am looking to get the index of the selected item in a list box to add the selected item to list box 2.
The listbox was created in HTML.
<div class="clearfix">
<div class="select-container">
<select name="sometext" size="5">
<?
var sheet = SpreadsheetApp.getActiveSpreadsheet();
SpreadsheetApp.setActiveSheet(sheet.getSheets()[1]);
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A1:A"+lastRow);
var data = myRange.getValues();
?>
<? for (var i = 0; i < data.length; ++i) { ?>
<option><?!= data[i] ?></option>
<? } ?>
</select>
</div>
<div class="buttons">
<div><button onclick='addMonitoredFolder()' id='button1'>Add</button></div>
</div>
So when I press button 'Add', I want the currently selected item in list box 1 to be added to listbox 2. It would be good that if the user selects multiple options in the list then it will add these or at least know how to handle this. I have function addMonitoredFolder in there because I was trying to figure it out by just can't get my head around it.
<div class="select-container">
<select name="sometext" size="5">
<option>option</option>
</select>
</div>
Thanks!

Here is code that can get multiple selections from a list, and transfer the choices to the second list:
index.html
<!DOCTYPE html>
<html>
<body>
<div>List Box One</div>
<select id="slctOne" multiple>
<option value="one">Value One</option>
<option value="two">Value Two</option>
<option value="three">Value Three</option>
<option value="four">Value Four</option>
</select>
<div>List Box Two</div>
<select id="slctTwo" multiple>
<option value="one">Value One</option>
<option value="two">Value Two</option>
<option value="three">Value Three</option>
<option value="four">Value Four</option>
</select>
<button onmouseup="getAndTransfer()">Get Choices</button>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
</body>
</html>
JavaScript.html
<script>
window.getAndTransfer = function() {
var allChoices = getMultiple();
putChoicesIntoSelectTwo(allChoices);
};
window.getMultiple = function() {
//console.log('getMultiple ran')
var allOptionNodesSelected = document.getElementById('slctOne').querySelectorAll('option:checked');
var howManySelected = allOptionNodesSelected.length;
console.log('number of option nodes: ' + howManySelected);
var optionElmt1 = allOptionNodesSelected[0];
console.log('optionElmt1.selected: ' + optionElmt1.selected);
var i=0,
arryAllOptions = [];
for(i=0;i<howManySelected;i+=1) {
console.log('optionElmt1.selected: ' + allOptionNodesSelected[i].value);
arryAllOptions.push(allOptionNodesSelected[i].value);
};
return arryAllOptions;
};
window.putChoicesIntoSelectTwo = function(theChoices) {
//Get select list two element
var selectListTwo = document.getElementById('slctTwo');
var allOptions = selectListTwo.getElementsByTagName("option"); //Get all current options inside of this select tag
var i = 0, thisOptionVal="";
//console.log(allOptions.length);
for (i=0;i<allOptions.length;i+=1) {
thisOptionVal = allOptions[i].value;
if (theChoices.indexOf(thisOptionVal) !== -1) {
allOptions[i].selected = true;
} else {
allOptions[i].selected = false;
};
};
};
</script>

How to hide and show div onselect using javascript

This is the code i am trying -
DIVS-
<div id="showdiv16" style="display:none;">...</div>
<div id="showdiv17" style="display:none;">...</div>
<div id="showdiv18" style="display:none;">...</div>
<div id="showdiv19" style="display:none;">...</div>
Now i have a drop down menu from which i am fetching values 16,17, 18,19
and on this drop down menu, i an calling onchange method as
<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >
And my JavaScript function is-
<script type="text/javascript">
function showSelected( sapna )
{
var myDivs = new Array(16,17,18,19);
for(var i=0; i<myDivs.length; i++)
{
if(myDivs[i] == sapna)
{
var divtoshow = 'showdiv'+sapna;
document.getElementById('showdiv'+sapna).style.display = "block";
}
else
{
document.getElementById('showdiv'+myDivs[i]).style.display = "none";
}
}
return false;
}
</script>
Let me know how can i achieve this show/hide div effect.

I know this is tagged as javascript and not jQuery, but it's super trivial to do this using jQuery, so here's an example.
$('#category').on('change click', function() {
$('div').hide();
$('#showdiv' + this.value).show();
});
Working jsFiddle: http://jsfiddle.net/UBsp9/

Though jQuery would be much easier and cleaner but get this in plain JavaScript below:
<html>
<head>
<title>test</title>
<style type="text/css">
div{height:50px;width:200px;text-align:center;
vertical-align:middle;border:1px dotted green;
background-color:khaki;}
</style>
</head>
<body>
<select id="test" onchange="showSelected(this.value)">
<option value="-1" selected="selected">select</option>
<option value="16">cat 16</option>
<option value="17">cat 17</option>
<option value="18">cat 18</option>
<option value="19">cat 19</option>
</select>
<div id="showdiv16" style="display:none;">16</div>
<div id="showdiv17" style="display:none;">17</div>
<div id="showdiv18" style="display:none;">18</div>
<div id="showdiv19" style="display:none;">19</div>
</body>
<script type="text/javascript">
var myDivs = new Array(16, 17, 18, 19);
function showSelected(sapna) {
var t = 'showdiv' + sapna,
r, dv;
for (var i = 0; i < myDivs.length; i++) {
r = 'showdiv' + myDivs[i];
dv = document.getElementById(r);
if (dv) {
if (t === r) {
dv.style.display = 'block';
} else {
dv.style.display = 'none';
}
}
}
return false;
}
</script>
</html>

My first guess is that you are trying to compare the string result from your select box against the integers in your myDivs array.
Here is some vanilla js matching your original code (although you can really save a lot of headache using a JS lib like jquery, so you may want to look into it).
function showSelected(sapna)
{
var myDivs = new Array(16,17,18,19);
for(var i=0; i<myDivs.length; i++)
{
document.getElementById('showdiv'+myDivs[i]).style.display = (myDivs[i] == parseInt(sapna)) ? 'block' : 'none';
} // end for i in myDivs.length
} // end function showSelected​​
And a js fiddle: http://jsfiddle.net/Wyedr/1/

if you can use jquery then you can do something like this:
<div id="showdiv16" class='targets' style="display:none;">Div 16</div>
<div id="showdiv17" class='targets' style="display:none;">Div 17</div>
<div id="showdiv18" class='targets' style="display:none;">Div 18</div>
<div id="showdiv19" class='targets' style="display:none;">Div 19</div>
<select name="category" id="category">
<option value=''>Select</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
</select>
​and here's the jquery
$(function(){
$('#category').change(function(){
var divToShow = $(this).val();
$('.targets').hide();
$('#showdiv' + divToShow ).show();
​ });
})
you can check the working demo here http://jsfiddle.net/H9cvZ/35/

You can also try this
For Sample Code, Check this JSFiddle

Div's visibility with javascript - problem

I am trying to use div's to display content on my page. This is controlled with an onchange element in a select menu. It works perfectly but the problem is I want one div to close when another one is opened. The div's open fine but it does not close the others. An example code is below. What am I doing wrong?
JavaScript:
if(document.getElementById('catgry').value == '01'){
document.getElementById('post04').style.visibility = "visible";
document.getElementById('post04').style.display = "";
document.getElementById('post07').style.visibility = "hidden";
document.getElementById('post07').style.display = "none";
}else if(document.getElementById('catgry').value == '02'){
document.getElementById('post02').style.visibility = "visible";
document.getElementById('post02').style.display = "";
document.getElementById('post04').style.visibility = "hidden";
document.getElementById('post04').style.display = "none";
document.getElementById('post07').style.visibility = "hidden";
document.getElementById('post07').style.display = "none";
}
HTML:
<div id="post04" style="visibility:hidden; display:none;">
<table class="posttb"><tr>
<td width="30%">Author</td>
<td><input type="text" name="author" size="30" class="postfd"></td>
</tr>
</table>
</div>

Hard to say without seeing your markup, but it could be as simple as this:
Example: http://jsfiddle.net/jtfke/
var posts = document.getElementById('posts').children;
document.getElementById('catgry').onchange = function() {
for( var i = 0, len = posts.length; i < len; i++ ) {
posts[ i ].style.display = (i == this.selectedIndex) ? 'block' : '';
}
};
example html
<select id='catgry'>
<option value='post01'>post 1</option>
<option value='post02'>post 2</option>
<option value='post03'>post 3</option>
<option value='post04'>post 4</option>
</select>
<div id='posts'>
<div>post 1 content</div>
<div>post 2 content</div>
<div>post 3 content</div>
<div>post 4 content</div>
</div>

Consider using jQuery and the jQuery accordion
http://jqueryui.com/demos/accordion/

You can do it with pure Javascript and some looping.
<form method="post" action="#">
<select id="selectMenu">
<option id="option1" value="option 1">option 1</option>
<option id="option2" value="option 2">option 2</option>
<option id="option3" value="option 3">option 3</option>
</select>
</form>
<div id="div1" class="postDiv">Div 1</div>
<div id="div2" class="postDiv">Div 2</div>
<div id="div3" class="postDiv">Div 3</div>
<script type="text/javascript">
init();
function init()
{
addListeners();
}
function addListeners()
{
document.getElementById("selectMenu").onchange = selectChange;
}
function selectChange(evt)
{
for(var i=0;i<evt.currentTarget.length;i++)
{
if(i == evt.currentTarget.selectedIndex)
{
adjustDivs(i+1, evt.currentTarget.options);
}
}
}
function adjustDivs(optionId, options)
{
document.getElementById("div" + optionId).style.display = "block";
for(var i=0;i<options.length;i++)
{
if(i != (optionId-1))
{
document.getElementById("div" + (i+1)).style.display = "none";
}
}
}
</script>
http://jsfiddle.net/hGxfS/

Install jquery;
Use this code as html markup for select box . remember to specify id=visibiitySelector and providean attribute "_showelement" for each option value, that matches with the id of the div you want to display if option is selected
<select id="visibilitySelector">
<option value="whatever" _showelement="post01">whatever</option>
<option value="whatever" _showelement="post02">whatever</option>
</select>
Copy this function into the javascripts of the page
$(document).ready(function(){
$('#visibilitySelector').change(function(){
var showelement = $('#visibilitySelector option:selected').attr('_showelement');
$('div.showhide').not('#' + showelement ).hide();
$('#' + showelement ).show();
});
});
Code the divs as below, remembering to provide class "showhide"
<div id="post01" class="showhide">
</div>
<div id="post01" class="showhide">
</div>
<div id="post01" class="showhide">
</div>