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>
Related
I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo
Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>
Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})
First of all I have never really played with Javascript before, asides finding stuff that you clever types have created and then adding it to my sites.
I would like to show a div based on which option is selected in a drop down on the page.
I have Tariffs 1 - 4, the Tariff selected shows as t1, t2, t3 and t4 but the Divs are then not becoming visible.
I have tested the show / hide function of the div bit with a simple button and that worked, I just can't seem to make it pick up the variable to show the one which is selected.
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1"><p>Tariff 1</p></div>
<div class="t2"><p>Tariff 2</p></div>
<div class="t3"><p>Tariff 3</p></div>
<div class="t4"><p>Tariff 4</p></div>
</div>
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
if (item.style.display === 'none') {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
document.getElementById("select").addEventListener("change", showSelectedItem);
then the css for all the t1, t2... divs is
.t1
{display: none}
Thanks in advance, I suspect its something very obvious when you know what you are looking at.
Youe css styles wont be avaliable with item.style.display. Only the inline styles will be available with the above selector.
Logic
Make all nodes hidden initially with style="display:none" in HTML
On change, check the selected value.
Hide all nodes with class name which is not same as selected value.
If you want to hide the dropdown when the user selects an option, you could select the dropdown with document.getElementById("select") and set style.display = 'none'
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
const classes = ['t1', 't2', 't3', 't4'];
// Toggle visibility;
classes.forEach((classNode) => {
document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
});
// Hide the dropdown when the user selects an option
document.getElementById("select").style.display = "none";
}
document.getElementById("select").addEventListener("change", showSelectedItem);
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1" style="display: none;">
<p>Tariff 1</p>
</div>
<div class="t2" style="display: none;">
<p>Tariff 2</p>
</div>
<div class="t3" style="display: none;">
<p>Tariff 3</p>
</div>
<div class="t4" style="display: none;">
<p>Tariff 4</p>
</div>
</div>
If you want the css styles also to be reflfced with your script, you have to make use of Window.getComputedStyle() Reference
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
const selectedNode = document.querySelector(`.${item}`);
if (selectedNode) {
const displayValue = window.getComputedStyle(selectedNode).display;
const classes = ['t1', 't2', 't3', 't4'];
classes.forEach((classNode) => {
document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
});
// Hide the dropdown when the user selects an option
document.getElementById("select").style.display = "none";
}
}
document.getElementById("select").addEventListener("change", showSelectedItem);
.t1, .t2, .t3, .t4 {
display: none;
}
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1">
<p>Tariff 1</p>
</div>
<div class="t2">
<p>Tariff 2</p>
</div>
<div class="t3">
<p>Tariff 3</p>
</div>
<div class="t4">
<p>Tariff 4</p>
</div>
</div>
This is my solution here
1.) Add t-content class to you t1 - t4. This is easily to hide them in javascript later on.
.t-content {
display: none
}
<div class="t1 t-content"><p>Tariff 1</p></div>
<div class="t2 t-content"><p>Tariff 2</p></div>
<div class="t3 t-content"><p>Tariff 3</p></div>
<div class="t4 t-content"><p>Tariff 4</p></div>
2.) Slight modify your javascript code
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
// Select our target
var selected_div = document.getElementsByClassName(item)[0];
// Make all t-content hide first
var t_content = document.getElementsByClassName('t-content');
for (var i = 0; i < t_content.length; i++) {
t_content[i].style.display = 'none';
}
// Display our target div
selected_div.style.display = 'block';
}
You need to compare display property of div instead of value of dropdown.
var item = document.getElementById("select").value;
var dv = document.querySelector("."+item);
document.getElementById("current").innerHTML = item;
if (dv.style.display === 'none') {
dv.style.display = 'block';
} else {
dv.style.display = 'none';
}
https://jsfiddle.net/palak6041/9wj07ebv/17/
This will not hide other divs though you need to hide it with additional code
below example will hide other div, only selected div will be visible
https://jsfiddle.net/palak6041/9wj07ebv/25/
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';
}
Here is my Fiddle to the example
$('select#classes').on('change', function() {
var classSearch = $(this).val();
$('.col-sm-6:not(:contains(' + classSearch + '))').hide();
$('select#subjects').on('change', function() {
var subjectsSearch = $(this).val();
$('.col-sm-6:contains(' + classSearch + '))').show();
$('.col-sm-6:not(:contains(' + subjectsSearch + '))').hide();
});
});
I strongly suggest the use of values html attribute instead of the text itself for options, otherwise the value of the select will be the selected text (not very useful).
And a little explanation of how you structured your page could have been great, so we wouldn't have to go through the whole code and try to understand what it does and how it is built: what should we display ? when ?
About your problem (with a general structure):
HTML:
<label for="select_class">Class:
<select id="select_category" class="selectSome">
<option value="null">Please select...</option>
<option value="c1">Class 1</option>
<option value="c2">Class 2</option>
<option value="c3">Class 3</option>
</select>
</label><br/>
<label for="select_subject">Subject:
<select id="select_subject" class="selectSome">
<option value="null">Please select...</option>
<option value="s1">Subject 1</option>
<option value="s2">Subject 2</option>
<option value="s3">Subject 3</option>
</select>
</label>
<hr/>
<div class="row" id="row_s1_c1">Subject 1 for Class 1</div>
<div class="row" id="row_s2_c1">Subject 2 for Class 1</div>
<div class="row" id="row_s1_c2">Subject 1 for Class 2</div>
<div class="row" id="row_s2_c2">Subject 2 for Class 2</div>
<div class="row" id="row_s3_c2">Subject 3 for Class 2</div>
<div class="row" id="row_s3_c3">Subject 3 for Class 3</div>
CSS:
.row {
display: none;
}
JS:
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good row only
if ($('#select_category').val() != 'null' && $('#select_subject').val() != 'null') {
$('#row_' + $('#select_subject').val() + '_' + $('#select_category').val()).show();
}
}
http://jsfiddle.net/g5cryt31/
You can do it using parents and not
$('select#classes').on('change', function() {
var classSearch = $(this).val();
$('.col-sm-6 *').not('.' + classSearch).hide();
$('select#subjects').on('change', function() {
var subjectsSearch = $(this).val();
$('.'+classSearch).parents('.col-sm-6').show();
$('.col-sm-6 *').not('.' + subjectsSearch).hide();
});
});
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