Question

此代码不起作用，为什么？

<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>

Td表没有隐藏，每次都显示此表。我需要的是当我选择蓝色或红色只显示“Just ask blue”或“Just ask”table。

对不起我的英语不好

Answer 1

那么你在一个元素周围包裹一个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表的基本结构

http://www.w3schools.com/html/html_tables.asp

Answer 2

因为您生成了无效的HTML。您不能在DIV元素中包装TABLE元素，因为它不符合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>";
//
?>

Answer 3

首先是HTML。将您的函数传递给选择对象，但确定所选值来自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>

现在您可以使用javascript确定select的值。以您的示例为例，更改将如下所示

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';
    }
}

Javascript隐藏显示对象

3 个答案: