Question

我有一个表单，它包含下拉框和不同的div项。根据下拉框中的选择，我显示这些div项目。但是这些div项中的一些文本在加载表单时显示，而不是在我从下拉框中选择选项时显示。代码有点像这样

<form>
      <select id="">
          <option value="one"> One </option>
          <option value="two"> Two </option>
          <option value="three"> Three </option>
      </select>
      <div id="onee"> header text ..<table> </table></div>
      <div id="twoo"> header text ..<table> </table></div>

</form>

因此，当我加载带有选择下拉框的页面表单时，它还会显示div中的标题文本。如何隐藏该文字？

Answer 1

 <div id="onee" style="display:none"> header text ..<table> </table></div>
      <div id="twoo" style="display:none"> header text ..<table> </table></div>

所以页面加载的完整代码是

<form>
      <select id="">
          <option value="one"> One </option>
          <option value="two"> Two </option>
          <option value="three"> Three </option>
      </select>
      <div id="onee" style="display:none"> header text ..<table> </table></div>
      <div id="twoo" style="display:none"> header text ..<table> </table></div>

</form>

在此之后更改选择框中的选项

只需替换display:none with display:block

Answer 2

如果您使用JavaScript根据选择显示div，您最初也可以隐藏所有div。以下是如何在JQuery中执行此操作：

$("#onee").hide();
$("#twoo").hide();

或者你可以用CSS隐藏它们：diplay：none。

如果您在下拉列表中使用回发，则可以在服务器端控制html输出，并仅渲染所需的div。

Answer 3

你可以在display：none。

开始这些div

如何隐藏表单的某些部分

3 个答案: