Drop Down List - on change

[ryanbutler]

Hi,

I have the following form:

<No, you don't. [webmasterworld.com]>

If the visitor selects that they have graduated from high school, the corresponding row "School Name" will show. However, if they select other from this drop down list, I need to be able to show/hide another table row beneath allowing them to select another option. So far the script I have looks like this for the "onchange" event of the drop down list:

//showing content based off drop down selection - hs schools
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^¦\\s)"+searchClass+"(\\s¦$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

var hsInputs;

function resetInputs() {
for (x in hsInputs) {
hsInputs[x].style.display = "none";
}
}

function setHsInputs() {
hsInputs = getElementsByClass("hsInput");
resetInputs();
}

function hsOptions(input) {
resetInputs();
if (input.value) {
//if (input.value == "other") {
//*hsInputs[input.selectedIndex-1].style.display = "block";
hsInputs[0].style.display = "block";

}
}

What I can't figure out at the moment is why when I select "other" from my drop down list (for other), both the follow up question and drop down list show in the first column of my table, instead of two cells? Or why the second drop down won't reset when the default option is selected?

If I need to clarify, I'll be happy to. Any insight would be great.

[edited by: DrDoc at 6:38 pm (utc) on July 16, 2007]

[ryanbutler]

Ok...I know why they're showing up like this in FF. FF uses the DOM property display of table-row, while IE uses display of block.

Any idea using the following code how I might achieve this?

//showing content based off drop down selection - hs schools
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^¦\\s)"+searchClass+"(\\s¦$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

var hsInputs;

function resetInputs() {
for (x in hsInputs) {
hsInputs[x].style.display = "none";
}
}

function setHsInputs() {
hsInputs = getElementsByClass("hsInput");
resetInputs();
}

function hsOptions(input) {
resetInputs();
if (input.value) {
//if (input.value == "other") {
//hsInputs[input.selectedIndex-1].style.display = "block";
hsInputs[0].style.display = "block";
}
}

[DrDoc]

I don't get what the table row display property has to do with anything. But, in either case -- this is how I understand things:

- You have a dropdown/radio in the first table cell
- You want a follow-up question to appear in the second table cell

In reference to the dropdown/radio, use

this.parentNode.nextSibling

In reference to the table cell, use

this.nextSibling