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
Related
I am trying to hide the other < p > when they do not satisfy my IF condition. I know how to do that using mutable lines of "document.getElementById('test3').style.display = 'none';". however, I am trying to find a way that I can combine the "none" style to all the unwanted < p > in one line if possible. I was looking into document.querySelector but I was not sure of how I can add it to my code.
My Code:
'''
<html>
<head>
<script>
function dropdownChange(element) {
var Likelihood=document.getElementById("Likelihood").value;
var Impact=document.getElementById("Impact").value;
if(Likelihood==="LH1" && Impact!== "Select2"){
if(Impact==="IM1" || Impact==="IM2" || Impact==="IM3" ){
document.getElementById('test1').style.display = 'block';
document.getElementById('test2').style.display = 'none';
document.getElementById('test3').style.display = 'none';
}
else if (Impact==="IM4" || Impact==="IM5") {
document.getElementById('test2').style.display = 'block';
document.getElementById('test1').style.display = 'none';
document.getElementById('test3').style.display = 'none';
}
}
else if (Likelihood==="LH2" && Impact!== "Select2") {
if(Impact==="IM1" || Impact==="IM2"){
document.getElementById('test3').style.display = 'block';
document.getElementById('test1').style.display = 'none';
document.getElementById('test').style.display = 'none';
}
else if (Impact==="IM3" || Impact==="IM4") {
document.getElementById("test").innerHTML = "MODERATE";
}
else if (Impact==="IM5") {
document.getElementById("test").innerHTML = "HIGH";
}
}
}
</script>
</head>
<body>
<select id ="Likelihood" onchange="dropdownChange(this);">
<option value="Select1" selected="selected">Select Likelihood</option>
<option value="LH1">Rarely (1)</option>
<option value="LH2">Unlikely (2)</option>
<option value="LH3">Moderately (3)</option>
<option value="LH4">Likely (4)</option>
<option value="LH5">Certainly (5)</option>
</select>
<select id="Impact" onchange="dropdownChange(this);">
<option value="Select2" selected="selected">Select Impact</option>
<option value="IM1">Insignificant (1)</option>
<option value="IM2">Minor (2)</option>
<option value="IM3">Moderate (3)</option>
<option value="IM4">Major (4)</option>
<option value="IM5">Critical (5)</option>
</select>
<div class="w">
<p id="test1" style="display:none;">test1</p>
<p id="test2" style="display:none;">test2</p>
<p id="test3" style="display:none;">test3</p>
</div>
</body>
</html>
'''
I want to mention that the text I want to be displayed is based on the selection of both menus. Any kind of hint or ideas to get the result I want would be much appreciated.
Hi I have a small question.
I have 2 select form , and i want when i choose rental the employed type become hidden and here's my code :
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
$(function() {
var select = $('#Type-option');
select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
});
any idea ?
Few suggestions here
1. Never mix your mark up with your javascript.Consider binding events at javascript
2. I have modified your markup a bit,because when you hide employeetype u need to hide the label too
check the following snippet
$(document).ready(function(){
var select = $('#Type-option');
var employeeTypeOption=$('#employedType-option');
var employedType=$('#employedType');
select.on('change', function() {
var selectOption=select.find('option:selected').val();
if (selectOption == "rental") {
employeeTypeOption.hide();
employedType.hide();
} else {
employeeTypeOption.show();
employedType.show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
</span>
Hope this helps
wrong syntax.
check $(document).on.('action','selection',function(){}); signature.
Tyr with below code
$(document).on('change','#Type-option', function() {
if ($(this).val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
I am not sure but i guess you have missed one of these otherwise your code is working fine
Add reference to jquery library
Wrap your jquery code inside script tag.
<script>
$(function() {
var select = $('#Type-option'); select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
}
else {
$('#employedType-option').show();
}
});
});
</script>
I think this is what you want. try the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label id="emp">Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
<script type="text/javascript">
$("#Type-option").on('change',function(){
var theVal = $(this).val();//get the selected value
if(theVal == "rental"){
$("#emp").hide();
$("#employedType-option").hide()
}
else{
$("#emp").show();
$("#employedType-option").show()
}
})
</script>
</body>
</html>
How can i create a multiple tabs like i have one select box ,i want to fire function on onchange by which i want to display div if they match option value,if option value is 1 i want div with id 1 to get displayed and rest hide.
code would b like
<select id="sel" onChange="valueNew()">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<div style="background:#ddd;width:100%; height:500px; display:none"></div>
<div style="background:#ddd;width:100%; height:500px;display:none"></div>
<div style="background:#ddd;width:100%; height:500px;display:none"></div>
This is how I would do it:
function valueNew() {
for (var i = 0; i < document.querySelectorAll("div").length; i++) {
(document.querySelectorAll("div")[i]).style.display = "none";
}
document.querySelectorAll("div")[document.querySelector("#sel").value - 1].style.display = "block";
}
Here is the JSFiddle demo
Find the following example:
function changeTab(value)
{
var tabs = document.getElementsByClassName("tabs");
var i;
for(i=0; i<tabs.length; i++)
{
tabs[i].style.display = "none";
}
document.getElementById("tab_" + value).style.display = "block";
}
<select id="sel" onChange="changeTab(this.value)">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<div class="tabs" id="tab_1" style="background:#ddd;width:100%; height:500px; display:none">First Tab</div>
<div class="tabs" id="tab_2" style="background:#ddd;width:100%; height:500px;display:none">Second Tab</div>
<div class="tabs" id="tab_3" style="background:#ddd;width:100%; height:500px;display:none">Third Tab</div>
You can do something like this
// get all div with class name 'div'
var div = document.getElementsByClassName('div');
function valueNew(ele) {
// iterating over all div and hidding all
for (var i = 0; i < div.length; i++) {
div[i].style.display = 'none'
}
// getting div which is need to show using value of selected option
div[ele.value].style.display = 'block';
}
// trigger change event to show default div
document.getElementById('sel').onchange();
<select id="sel" onChange="valueNew(this)">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
<div class="div" style="background:#ddd;width:100%; height:500px; display:none">1</div>
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">2</div>
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">3</div>
I do it like:
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();
http://codepen.io/wangel13/pen/OXBrRp
And code:
https://github.com/WaNgeL-SaTaR/pure-js-tab
<select id="sel" onChange="valueNew()">
<option value="one"> 1 </option>
<option value="two"> 2 </option>
<option value="three"> 3 </option>
</select>
<div id="one" style="background:#ddd;width:100%; height:500px; display:none"></div>
<div id="two" style="background:#ddd;width:100%; height:500px;display:none"></div>
<div id="three" style="background:#ddd;width:100%; height:500px;display:none"></div>
I have done a couple of changes in your HTML. You can easily identify it. Now for the JS part.
function valueNew(){
var x = document.getElementById("sel");
for(var i=0; i< x.options.length;i++){
if(x.value === x.options[i].value){
document.getElementById(x.options[i].value).style.display="block";
}
else
{
document.getElementById(x.options[i].value).style.display="none";
}
}
}
So I'm pretty baffled with this issue I have here. I'm almost certain this code is correct yet the list box that I want to appear is not showing up at all after something is selected from the first drop down box. Here is what I have going for the code now
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function view_private_user_list(){
var i = document.status.private_users.options[document.status.private_users.selectedIndex].value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="visible";
}
}
</script>
</head>
<body>
<div id="show_private_option">
<select id="private_users" onChange="view_private_user_list()">
<option value="0" SELECTED>Select user....</option>
<option value="1">Vincent</option>
</select>
<div id="private_select_now" style="visibility:hidden">
<select size="3">
<option value="">{#template_dlg.select}...</option>
<option value="SOOOOLDmax.htm">SOOOOLDmax</option>
<option value="mike.htm">tester</option>
</select>
</div>
</div>
</body>
</html>
This fiddle should work:
http://jsfiddle.net/3XENR/1/
I think the way you're trying to find out the current value of the dropdown doesn't quite work.
Try this version of the function instead.
function view_private_user_list(){
var selectEl = document.getElementById('private_users');
var i = selectEl.value;
if(i == 1){
document.getElementById('private_select_now').style.visibility="visible";
} else{
document.getElementById('private_select_now').style.visibility="hidden";
}
}
Try:
document.getElementById('private_select_now').style.display ="block";
and
document.getElementById('private_select_now').style.display="none";
instead
instead of visibility, use display
<script type="text/javascript">
function view_private_user_list(){
var i = document.getElementById('private_users').selectedIndex.value
if(i == 1){
document.getElementById('private_select_now').style.display="block";
} else{
document.getElementById('private_select_now').style.display="none";
}
}
</script>
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>