[RESOLVED] dropdown box not showing up in the correct part of the table

Hi all,

I have this code below that displays or hides a dropdown box depending on what is chosen in the drop down box above it. It does work properly. The only problem is that when the 2nd dropdown box is displayed (because the correct option was chosen in the 1st dropdown box), it is not displayed in the correct part of the table. The second dropdown box should be displayed right below the first dropdown box, but instead the 2nd dropdown box is diplayed below the text. When “yes” is chosen from the first dropdown box, the 1st dropdown box also moves to the right. I would like it to stay where it is. Does anyone have any ideas?

Thanks,
Cedric

<script type=”text/javascript”>
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = ‘none’;
document.getElementById(id2).style.display = ‘none’;
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = ‘block’;
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = ‘block’;
}
}
// ]]>
</script>

<table>
<tr>
<td width=”85″><font size=”2″ face=”Verdana, Arial, Helvetica, sans-serif”>Price?:</font></td>
<td width=”180″><select name=”price” id=”price” onchange=”display(this,’0′,’1′);”><option value=”0″>No</option><option value=”1″>Yes</option></select></td>
</tr>
<tbody id=”1″ style=”display: none;”>
<tr>
<td width=”85″>Price Font:</td>
<td width=”180″><select name=”pricefont” id=”pricefont”><option value=”ffffff”>White</option><option value=”000000″>Black</option></select></td>
</tr>
</tbody>
<tbody id=”0″ style=”display: none;”>
<tr>
<td width=”85″></td>
<td width=”180″><input name=”pricefont” type=”hidden” id=”pricefont” value=””></td>
</tr>
</table>

Also in #JavaScript _↴