2

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

<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 表不隐藏，每次都显示这个表。当我选择蓝色或红色时，我需要它只显示“只问蓝色”或“只问”表。

PS对不起我的英语不好

4

3 回答 3

2

好吧，您将 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

于 2013-08-20T15:10:18.323 回答
1

首先，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';
    }
}
于 2013-08-20T15:26:17.583 回答
0

因为您生成了无效的 HTML。您不能将 TABLE 元素包装在 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>";
//
?>
于 2013-08-20T15:10:44.693 回答