Question

当用户从列表中选择项目时，我如何隐藏标签，我有这段代码隐藏输入文本，但我如何隐藏该输入文本的标签？

<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex==8){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<label>Other</label><input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>

我想隐藏<label>Other</label>我该怎么做？

Answer 1

更改您的选择标记和输入文字，如下所示。

<select name="one" onchange="if (this.selectedIndex=='other'){document.getElementById("otherText").style.visibility='visible'}else {document.getElementById("otherText").style.visibility='hidden'};">


<div id="otherText" style="visibility:hidden;"><label>Other</label><input type="textbox" name="other" /></div>

希望这有帮助。

Answer 2

DEMO

您无法像此this.selectedIndex

那样匹配下拉列表的文字或值

将其更改为this.selectedIndex == 8以匹配索引

给文本框id="other"显示或隐藏它。

<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('other').style.visibility='visible'}else {document.getElementById('other').style.visibility='hidden'};">

Updated Demo

为标签l_other

创建新ID

<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('l_other').style.visibility='visible';
document.getElementById('other').style.visibility='visible'}else {document.getElementById('l_other').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden'};">

Demo

使用内容为other的单个div包裹label和textbox

<select name="one" onchange="if (this.selectedIndex== 8){
document.getElementById('other').style.visibility='visible'}else{
document.getElementById('other').style.visibility='hidden'}">

Answer 3

function OnChange(that) {            
        var lblOther = document.getElementById('lblOther');
        if (that.options[that.selectedIndex].text == 'Other') {                
            lblOther.style.display = "block";
        }
        else {               
            lblOther.style.display = "none";               
        };
    }

<form name="myform">
    <table>
        <td>
            <select name="one" onchange="OnChange(this);">
                <option value="" selected="selected">Select...</option>
                <option value="1">1</option>
                <option value="2">3</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="other">Other</option>
            </select>
            <label id="lblOther" style="display: block;">Other</label><input type="textbox" name="other" style="visibility: hidden;" />
        </td>
    </table>
</form>

从列表中选择项目时隐藏标签 - javascript

3 个答案: