问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何隐藏选择标签？

社区维基
1
新手上路，请多包涵

我有这个简单的表格：

 <form method="post" action="index.php" >
<table>

<tr>
<td>
Sex:
</td>
<td>
  <select name="sex" >
   <option value="e">Select  </option>
   <option value="girl">Girl  </option>
   <option value="boy">Boy  </option>
  </select>
</td>
</tr>

<tr>
<td>
Accessories:
</td>
<td>
  <select name="earrings" >
   <option value="e">Select  </option>
   <option value="gold">gold  </option>
   <option value="silver">silver  </option>
  </select>
</td>
</tr>

</table>

<br>
<input type="submit" size="10" value="Go" name="go">
</form>

我希望当我在第一个选择中单击“男孩”时，此块必须消失：

 <tr>
<td>
Accessories:
</td>
<td>
  <select name="earrings" >
   <option value="e">Select  </option>
   <option value="gold">gold  </option>
   <option value="silver">silver  </option>
  </select>
</td>
</tr>

我可以用 CSS 做到这一点吗？如果没有，我可以用 javascript 做到这一点吗？

原文由 xRobot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcss
阅读 579
2 个回答
得票最新
社区维基
1
✓ 已被采纳

你不能在 CSS 中做到这一点，但你可以在 JavaScript 中做到这一点

function hide(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'hidden';
}

function show(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'visible';
}

只要确保你的 td 有 id=earringstd

然后创建函数：

 function genderSelectHandler(select){
if(select.value == 'girl'){
show();
}else if(select.value == 'boy'){
hide();
}}

现在您所要做的就是将您的性别选择标签更改为：

 <select name="sex" onchange="genderSelectHandler(this)">

原文由 Goran Jovic 发布，翻译遵循 CC BY-SA 2.5 许可协议

社区维基
1

hidden 属性隐藏了 select 但标签仍然呈现，并且占用页面空间。

如果你想隐藏一个选择并且根本不希望它出现，但仍然能够与 DOM 交互，这里有一些示例代码：

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">

        function hide(){
          var elem = document.getElementById('sel1');
          elem.style.display = 'none';
        }

        function show(){
          var elem = document.getElementById('sel1');
          elem.style.display = 'inline';
        }

</script>

</head>
<body>
    <form id="form1" runat="server">

      <select id='sel1' style='display:inline;'/>

      <input type="button" onclick="show();" value="Show"></input><br>
      <input type="button" onclick="hide();" value="Hide"></input><br>

    </form>
</body>
</html>

原文由 live-love 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题