Changing the select state of a dropdown in a Show/Hide script

[Diggum1]

I'm using the following show/hide script. If a user clicks No, it will clear all checkboxes and radio buttons in the appropriate div.

Anyone know how I could make it so that any select boxes change back to the default (value=select), if a user clicks No? I'd that to add that functionality to this existing script.

Thanks so much
Rick


--------------------------------------------------------
<input type="radio" name="Leader7" id="LeaderYes7" value="yes" onFocus="showlayer('LeaderQuestion_7');return true;"/>

<input type="radio" name="Leader7" id="LeaderNo7" value="no" onFocus="hidelayer('LeaderQuestion_7');return false;"/>

--------------------------------------------------------


function showlayer(whichLayer) {
document.getElementById(whichLayer).style.display = 'block';
}
function hidelayer(whichLayer) {
document.getElementById(whichLayer).style.display = 'none';

//Clear all Radio and Checkboxes when clicking No

var d = document.getElementById(whichLayer);
var e = d.getElementsByTagName("input");
for ( var i = 0; i < e.length; i++ ) {
if( e.type == "checkbox" || e.type == "radio" )
e.checked = false;
}

}

 

[rac2]

Maybe

...
if( e[i].type == "checkbox" || e[i].type == "radio" )[COLOR=red] {[/color]

    e[i].checked = false;
[COLOR=red] }[/color]
if( e[i].type == "select-one" || e[i].type == "select-multiple" ) { 

    e[i].selectedIndex = 0;
}

 

[Diggum1]

Hmmm, I used the following per your suggestion. Didn't seem to work. It cleared the checkboxes and radio buttons, but not the select box. Also below is the markup for the select box itself for reference.

Thanks
Rick

-------------------Show/Hide script-------------------------

function showlayer(whichLayer) {
document.getElementById(whichLayer).style.display = 'block';
}

function hidelayer(whichLayer) {
document.getElementById(whichLayer).style.display = 'none';
var d = document.getElementById(whichLayer);
var e = d.getElementsByTagName("input");

for ( var i = 0; i < e.length; i++ ) {
if( e.type == "checkbox" || e.type == "radio" )
e.checked = false;
}
if( e.type == "select-one" || e.type == "select-multiple" ) {

e.selectedIndex = 0;
}
}

----------------------Select Box--------------------------

<select name="f:f10007390" id="f_f10007390">

<option value="">-- Select --</option>
<option value="2">Home Improvement</option>
<option value="1">Lower Payments</option>
<option value="7">Lower Interest Rate</option>
<option value="3">Debt Consolidation</option>
<option value="0">Cash Out</option>
<option value="4">Change My Terms</option>

</select>

 

[cLFlaVA]

1) the getElementsByTagName("input") will never return a select box, because that's not the tag name.

2) i believe multi-selects need to be handled differently - they need to have their options looped through and set to unselected.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Diggum1]

hmmm...hate to ask, any idea on how to do that?

Rick

 

[cLFlaVA]

do what?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Diggum1]

In the select box, reset any selections back to the default "select" when the hidelayer function is triggered?

 

[tsuji]

Bracketing is still not right.

 

[kaht]

The bracketing appears fine, it's just that his indentation is abysmal...

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[kaht]

Diggum, what cory is saying is that you are not going to pick up the dropdowns in your function because you're using getElementsByTagName("[!]input[/!]"), and dropdowns are of tag type <select>, not <input>.

So, you'll have to set up a 2nd loop in your function to grab the dropdowns (via getElementsByTagName("[!]select[/!]")) and reset them seperately.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[tsuji]

I don't know, it seems...(me time to go to bed?)
[tt]
for ( var i = 0; i < e.length; i++ ) {
if( e.type == "checkbox" || e.type == "radio" ) [highlight]{[/highlight]
e.checked = false;
}
if( e.type == "select-one" || e.type == "select-multiple" ) {

e.selectedIndex = 0;
}
[highlight]}[/highlight]
[/tt]

 

[kaht]

I think the confusing thing is that he didn't use any brackets for his first if statement (which is not necessary unless you're putting more than 1 statement in the if-block. However, I always use them just to be consistent, and I think that is probably the better behavior.
[small](copied from above)[/small]

function showlayer(whichLayer) [COLOR=black red]{[/color]
        document.getElementById(whichLayer).style.display = 'block';
    [COLOR=black red]}[/color]

    function hidelayer(whichLayer) [COLOR=black cyan]{[/color]
    document.getElementById(whichLayer).style.display = 'none';
        var d = document.getElementById(whichLayer);
        var e = d.getElementsByTagName("input");

        for ( var i = 0; i < e.length; i++ ) [COLOR=black yellow]{[/color]
            if( e[i].type == "checkbox" || e[i].type == "radio" )
            e[i].checked = false;
        [COLOR=black yellow]}[/color]
            if( e[i].type == "select-one" || e[i].type == "select-multiple" ) [COLOR=black purple]{[/color]

            e[i].selectedIndex = 0;
        [COLOR=black purple]}[/color]
    [COLOR=black cyan]}[/color]

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[kaht]

Hmmm... upon further investigation you are probably right though, I'm sure he probably did intend the 2nd if statement to be inside the for-block. It just didn't crash because syntactically his code was fine.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Diggum1]

Sorry, a javascript neophyte here...

I'll look into setting up a 2nd loop to grab the selects.

Thanks

 

[Diggum1]

Sorry, I'm stumped.

Ultimately, when that hidelayer function is triggered, I need to reset all select boxes,in a given ID, back to their default (value="")

Sometimes the display text for the default state is (--Select--) sometimes it's (--Child1--). It's different on all select boxes. But the value is always the same (value="")

I'm trying to figure out how to loop through a given ID to identify all the selects, but I can't figure out how...

 

[cLFlaVA]

as kaht said,

Diggum, what cory is saying is that you are not going to pick up the dropdowns in your function because you're using getElementsByTagName("input"), and dropdowns are of tag type <select>, not <input>.

So, you'll have to set up a 2nd loop in your function to grab the dropdowns (via getElementsByTagName("select")) and reset them seperately.

set up a second loop.

var s = d.getElementsByTagName("select");
for ( var i = 0; i < s.length; i++ ) {
    s[i].selectedIndex = 0;
}

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Diggum1]

Brilliant!
Got it to work. Thanks for your patience, kaht and cLFlaVA

Rick