我如何制作“display：none;”适用于包含div awell的元素

Question

我试图隐藏某些内容，只有在<select>字段中选择了某些内容时才会显示。

据我所知，我需要隐藏内容作为开头，所以我试图这样做：

      <div id="abc" style="display:none;">
       <tr> <!-- Third row -->
        <td>
            from
        </td>

        <td>
           <select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">

                <option value="US" name="US">Some other US option</option>
                <option value="US" name="US">some US option</option>

            </select>
        </td>
       </tr>
      </div>

这只会隐藏<div>而不是其内容。

Answer 1

浏览器解析此代码

<table>
    <div>
        <tr>
            <td>TABLE CELL</td>
        </tr>
    </div>
</table>

进入这个结构

注意DIV如何不包裹你的表格行，但是放在表格之前（作为相邻的兄弟）。因此，如果隐藏DIV，表格行将不会被隐藏。

无效的HTML会启用意外行为。写有效的HTML。

Answer 2

那<div>看起来并不正确。我假设您的代码中的其他位置有<table>标记，但您尚未在此处粘贴。

您可以尝试将样式应用于<tr>标记。元素的子元素应该始终继承该元素的样式，因此错误放置的<div>标记可能是问题所在。试试这个：

<tr id="abc" style="display:none;"> <!-- Third row -->
    <td>
        from
    </td>

    <td>
       <select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">

            <option value="US" name="US">Some other US option</option>
            <option value="US" name="US">some US option</option>

        </select>
    </td>
</tr>