如何隐藏标记 select?

我有这么简单的形式：


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

<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 name="go" size="10" type="submit" value="Go"/>

</form>


我想在我点击时 "boy" 在第一 select, 然后这个单位应该消失：


<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 ?
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    小姐请别说爱

    赞同来自:

    你不能这样做 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/">


    </select>
    2021-03-21 0 0
    分享

    江南孤鹜

    赞同来自:

    隐藏的属性隐藏了选择，但标签仍然显示并在页面上进行。

    如果你想隐藏 select 并且不希望它出现，但仍然能够与之互动 DOM, 这是一个示例代码：


    <html xmlns="[url=http://www.w3.org/1999/xhtml">]http://www.w3.org/1999/xhtml">[/url]
    
<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;"></select>
    
<input onclick="show//;" type="button" value="Show"/><br/>
    
<input onclick="hide//;" type="button" value="Hide"/><br/>
    
</form>
    
</body>
    
</html>
    2021-03-21 0 0
    分享

    江南孤鹜

    赞同来自:

    我知道这是旧的，但我改变了merran的代码，如下所示，我以为我会分享它。 在这种情况下，代码崩溃，以便它不会在页面上保存其位置，而上面指定的代码继续保持其形状，但变得不可见。


    function genderSelectHandler/select/{
    
if/select.value == 'girl'/{
    
$/"#earringstd"/.show// 
    
}else{
    
$/"#earringstd"/.hide//;
    
}}
    

    
<select name="sex" onchange="genderSelectHandler/this/">


    </select>
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved