I was wondering if its possible to hide and display different elements by using a dropdown menu. Currently i have this code for my menu:
<select id="productSel" onChange="OnSelectedIndexChange()">
<option value="0">Value 0</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
and this for my javascript:
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "0"){
document.getElementById("Option1").style.display = "block";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "none";
}
};
</script>
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "1"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "block";
document.getElementById("Option3").style.display = "none";
}
};
</script>
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "2"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "block";
}
};
</script>
and this is the area that needs to change:
<div id="Option1" style="display:none">
<p>Option1</p>
<p>Line 2</p>
theres 2 more divs just like that except with different Option numbers but for some reason it wont show the rest of my code past the closing div tag. Im having trouble because that code works, except it only works for the top option. so if theres 3 options, they start off as all invisible the way i wanted but when i pick an option from the menu, it wont display them. it will only display the third option and not the other 2. if theres 2 options it will only display the second option and not the first, even if i pick the first one. This is my first time asking on here so im sorry if i wasnt clear
Dropdown box should be call 3 time events.Which you are created, so it last function call every time.You can change like this.
<script>
function OnSelectedIndexChange() {
if (document.getElementById('productSel').value == "0"){
document.getElementById("Option1").style.display = "block";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "none";
}
else if (document.getElementById('productSel').value == "1"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "block";
document.getElementById("Option3").style.display = "none";
}
else if (document.getElementById('productSel').value == "2"){
document.getElementById("Option1").style.display = "none";
document.getElementById("Option2").style.display = "none";
document.getElementById("Option3").style.display = "block";
}
};
</script>
You are replacing the function each time you redefine it. It will only execute the value == "2" version.
At the least, you need to put all of the conditions inside a single copy of the function.
Related
this is my first question here, so please be not too harsh ;)
I want to pop up a new listelement with javascript an also change the color of the link. How can i do that?
I tried this:
<script type="text/javascript">
function toggle(control, control2){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
var elem = document.getElementById(control2);
if(elem.style.display == "rgb(0,10,50)"){
elem.style.display = "rgb(50,10,60)";
}else{
elem.style.display = "rgb(0,10,50)";
}
}
</script>
<li id="lifi" class="leistungen"> x Zum aufklappen hier klicken.
<ul id="first" style="display:none">
If I just do the first part, it works just fine. But with both parameters I cant get it to work.
Thanks a lot.
You need to set the second parameter, 'control2' to a different name than the first one, you cant use 'elem' for both:
<script type="text/javascript">
function toggle(control, control2){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
var elem2 = document.getElementById(control2);
if(elem2.style.display == "rgb(0,10,50)"){
elem2.style.display = "rgb(50,10,60)";
}else{
elem2.style.display = "rgb(0,10,50)";
}
}
</script>
and welcome to stack overflow!
I have this piece of code which i use for language toggling:
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
if(document.getElementById(varon).style.display == 'block'){
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
}
else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
}
}
and HTML:
<div id="mydivon" style="display:block">some language text</div>
<div id="mydivoff" style="display:none">some other language text</div>
Language1/Language2
and i would like to make toggle button switchable, when one Language1 is selected, switch toggle text to Language2 and vice versa. Some pointers would be welcome. Thx
I've setup a Fiddle , is this the effect you wanted to achieve? As #Shilly already said in the comments, you can use textContent to change the content of your anchor tag.
I've assigned an ID to your anchor #languageSwitch so I can do following stuff in your JS
HTML
<div id="mydivon" style="display:block">
Language 1 is selected
</div>
<div id="mydivoff" style="display:none">
Language 2 is selected
</div>
<a id="languageSwitch" href="#" onmousedown="toggleDiv('mydiv');">
Switch to Language2
</a>
JS
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
// Assign the switch anchor to a variable
var switcher = document.getElementById('languageSwitch');
if (document.getElementById(varon).style.display == 'block') {
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
//Change the text to language1 (language 2 is active)
switcher.textContent = "Switch to Language1";
} else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
//Change the text to language2 (language 1 is active)
switcher.textContent = "Switch to Language2";
}
}
As described by the OP in the comments:
Currently you're displaying an element on wether it's selected but the toggle itself isn't changing language.
Now what you can do is when you mousedown and execute toggleDiv(divid)
there should be a special variable to your disposal called this
this basically means "this called me" in the most simple form.
In your case this is the Language1/Language2 link
So what you could do then within your function:
function toggleDiv(divId) {
//also highly recommend you cache your variables
varon = document.getElementById(divId + 'on');
varoff = document.getElementById(divId + 'off');
if (varon.style.display == 'block') {
varon.style.display == 'none';
varoff.style.display = 'block';
this.innerHTML = varoff.innerHTML; // <- selected element value injected in bound button
} else
varon.style.display == 'block';
varoff.style.display = 'none';
this.innerHTML = varon.innerHTML; // <- selected element value injected in bound button
}
With the line this.innerHTML = varon/off.innerHTML you're saying, "the element that called me has to have the value of the block element"
The value will still default be Language1/Language2 but as soon as you change it it will update.
Hope it helps!
NOTE: UNTESTED
Step 1: Add an id to your link:
<a id="toggle-language" href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>
Step 2: Change your function to:
function toggleDiv(divid) {
var on = document.getElementById(divid + 'on'),
off = document.getElementById(divid + 'off'),
language = document.getElementById('toggle-language');
if (on.style.display == 'block'){
on.style.display = 'none';
off.style.display = 'block';
language.textContent = 'Language 2';
}
else {
on.style.display = 'block';
off.style.display = 'none';
language.textContent = 'Language 1';
}
}
I want to hide a control using JavaScript based on the selection of an item in a dropdown list.
Here's what I currently have:
function DDLDGChanged() {
var text = $("#<%= DDLDG.ClientID %> option:selected").text();
alert(text);
if (text == "DG") {
document.getElementById('#<%=DDLPsaGroup.ClientID%>').style.display = "block";
document.getElementById('#<%=Label29.ClientID%>').style.display = "block";
document.getElementById('<%=txtClass.ClientID %>').disabled = false;
}
else {
document.getElementById('#<%=DDLPsaGroup.ClientID%>').style.display = "none";
document.getElementById('#<%=Label29.ClientID%>').style.display = "none";
document.getElementById('<%=txtClass.ClientID %>').disabled = true;
}
}
I am not sure if you can use jQuery, why you are relying on Javascript code. But going by your code, you are mixing both do it either like this:-
Your Way:-
function DDLDGChanged() {
var text = $("#<%= DDLDG.ClientID %> option:selected").text();
alert(text);
if (text == "DG") {
document.getElementById('<%=DDLPsaGroup.ClientID%>').style.display = "block";
document.getElementById('<%=Label29.ClientID%>').style.display = "block";
document.getElementById('<%=txtClass.ClientID %>').disabled = false;
}
else {
document.getElementById('<%=DDLPsaGroup.ClientID%>').style.display = "none";
document.getElementById('<%=Label29.ClientID%>').style.display = "none";
document.getElementById('<%=txtClass.ClientID %>').disabled = true;
}
}
Please note, when you use Javascript method, no need to use # to fetch the control.
Do it with pure jQuery itself, like the way you have retrieved text variable.
HI I have a drop down menu, which determins which sections of a form should be displayed. This works, except for when the initial page loads all of the elements are shown. Once you make a selection it then displays only the correct elements.
Below is my Javascript, is there a way to set all of the elements to hidden initially, sorry if this is a stupid question but i am new to javascript.
if (current_value == "page_name") {
document.getElementById("contains").style.display = "block";
document.getElementById("term").style.display = "block";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "none";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
else if (current_value == "postcode") {
document.getElementById("contains").style.display = "none";
document.getElementById("term").style.display = "none";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "block";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
Give class attribute to all element.
Eg: if you have a input element like
<input type="text" name="something" id="something" class="hideme" />
hide element by using same class name for all elements as I explained above
$(document).ready(function() {
$(".hideme").hide();
});
I have this script on dynamic radio buttons... On load the divs display, great. One is automatically checked, great. If I click the other radio button the divs hide, great. When I click back to the main radio button to show the divs again the divs don't reappear.
How do I get the divs to reappear (show)?????
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if ("hideRow") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
Try :
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if (ele.style.display == "block") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
This is always true:
if ("hideRow") {
// Always executes
}
So, you only ever get to the if-block. You need to change the conditional on your if-statement.
if (ele.style.visibility == 'visible';) {
ele.style.visibility = 'hidden';
coup.style.visibility = 'hidden';
} else {
ele.style.visibility = 'visible';
coup.style.visibility = 'visible';
}
I may have entirely missed the mark and not understood what your trying to do, but that's the way I'd do it (I think - you may be trying to do something else).