Hi All,
I have a problem with some javascript code.
I am trying to toggle display between two tables upon change of a select box ( to alternate between search forms)
eg. one called searchTableUS (displayed when USA is selected) and searchTableCA when (displayed when canada is selected)
- <table id="searchTableUS">
-
<tr>
-
<td>
-
<label class="required">Check-in:</label></td>
-
<td id="checkIn">
-
<select name="check-inMonthYear">
-
<option value="10">Jan 2006</option>
-
</select>
-
<select name="check-inDay">
-
<option value="10">Tue 10</option>
-
</select>
-
</td>
-
</tr>
-
</table>
-
-
<table id="searchTableCA">
-
<tr>
-
<td>
-
<label class="required">Check-in:</label></td>
-
<td id="checkIn">
-
<select name="check-inMonthYear">
-
<option value="10">Jan 2006</option>
-
</select>
-
<select name="check-inDay">
-
<option value="10">Tue 10</option>
-
</select>
-
</td>
-
</tr>
-
</table>
CSS:
- table.showMe,table.showMe select{
-
display:block;
-
}
-
table.hideMe,table.hideMe select{
-
display:none;
-
}
Javascript (called onChange of select box and passes the object):
- function swapSimpleSearch(obj){
-
var selectedCountry = obj.options[obj.selectedIndex].value; //get selection
-
if (selectedCountry == "CA"){
-
document.getElementById("searchTableUS").className = "hideMe";
-
document.getElementById("searchTableCA").className = "showMe";
-
}
-
else{
-
document.getElementById("searchTableCA").className = "hideMe";
-
document.getElementById("searchTableUS").className = "showMe";
-
}
-
}
The problem I am having is when the hidden table is displayed, the select boxes are wrapping underneath each other instead of on the same line in the <TD>. I know its not the html as when the page first loads it looks fine. Its only when you hide it and display it again. Is there a known issue with hide/showing tables and content wrapping?
I tried adding nowrap to the td and white-space in CSS but both don't work.
Any ideas??
Thanks in advance,
Lisa
