Javascript隐藏显示对象

这个代码不起作用，为什么

<script>
function color(color_type){
    if (color_type == 'blue'){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}
</script>

<select onchange="color(this.value)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
   <?
   //
   echo "<tr>
<td width='100' class='tbl'>Just ask</td>
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr>";
   //
   ?>
</div>

<div id="blue" style="display:none;">
      <?
   //
   echo "<tr>
<td width='100' class='tbl'>Just ask blue</td>
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td>
</tr>";
   //
   ?>
</div>

功能颜色（颜色类型）{
如果（颜色类型=‘蓝色’）{
document.getElementById（'blue'）.style.display='block'；
document.getElementById（'red'）.style.display='none'；
} 
否则{
document.getElementById（'blue'）.style.display='none'；
document.getElementById（'red'）.style.display='block'；
}
}
红色
蓝色
好吧，你把一个div包装在一个元素上，这个元素是表的基础。基本上你的html结构是错误的

<div id="red" style="display:none;">
   <?
   //
   echo "<table><tr>
<td width='100' class='tbl'>Just ask</td>
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr></table>";
   //
   ?>
</div>

<div id="blue" style="display:none;">
      <?
   //
   echo "<table><tr>
<td width='100' class='tbl'>Just ask blue</td>
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td>
</tr></table>";
   //
   ?>
</div>


因为您生成了无效的HTML。您不能在DIV元素中包装表元素，因为它不符合HTML标准（或任何HTML遵从性）。如果要隐藏行，请将ID分配给TR元素，并丢失DIV：

<?
//
echo "<tr id='blue' style='display:none;'>
    <td width='100' class='tbl'>Just ask</td>
    <td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr>";
//
?>

首先，HTML。将select对象传递给函数，但确定所选值
从javascript函数而不是HTML中。简化您的选择，如下所示。
附加的id属性不是它工作所必需的，它只是当今良好的编程实践，提供了一个您可以使用的参考

<select id="color_choice" onchange="color(this)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

这对我来说很好。请注意，
tr
元素必须是
表的子元素（
thead
，
tbody
，
tfoot
）元素，它们不能是
div
的子元素。您有用于此的css吗？我已检查此代码是否正常工作。请删除浏览器中的缓存。请务必注意，您必须将tr标记嵌套在表中，否则将导致许多意外行为和浏览器兼容性问题。除非您的javascript包装在window.onload上，否则没有理由不起作用。检查浏览器控制台，看看是否有错误。@James。为了抓到坏的HTML，我给你加了一个。。。我错过了那张丢失的桌子标签！
function color( choices ){

    var color_type = choices.options[ choices.selectedIndex ].value;

    if ( color_type == 'blue' ){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}