使用JavaScript來隱藏和顯示下拉菜單和文本字段

在下面的下拉菜單中，當用戶選擇操作不，我想接下來的下拉菜單中顯示使用JavaScript來隱藏和顯示下拉菜單和文本字段

<select id="OperationType" onChange="check(this);"> 
<option value="OpNo">Operation No</option> 
<option value="OpEmp">Employee No</option> 
</select> 

<select id=OperationNos> 
<option value="1001">1001</option> 
<option value="1002">1002</option> 
</select>

如果用戶選擇員工沒有，我想最後的下拉菜單中進行隱藏和顯示了以下文本字段：

<input type='text'>

我所做的是我把下面的腳本，但它並不能掩蓋既不是兩個要素：

function check(elem) { 
    document.getElementById('OperationType').disabled = !elem.selectedIndex; 
}

它只禁用它。我希望它是隱形的。感謝

來源

2013-04-07 Nasser

~~添加樣式= 「顯示：無」你OperationNos選擇：~~

你並不需要通過this檢查（）。

如果「OpNo」選擇修改功能切換此CSS屬性：

function check() { 
    var dropdown = document.getElementById("OperationType"); 
    var current_value = dropdown.options[dropdown.selectedIndex].value; 

    if (current_value == "OpNo") { 
     document.getElementById("OperationNos").style.display = "block"; 
    } 
    else { 
     document.getElementById("OperationNos").style.display = "none"; 
    } 
}

例子：http://jsfiddle.net/2pna2/

來源

2013-04-07 08:30:47 sman591

看那個：

var ot = document.getElementById('OperationType'); 
ot.disabled = !elem.selectedIndex; 
ot.style.display = 'none'; // not rendered 
//ot.style.visisbility = 'hidden'; // rendered but just invisble it's there

來源

2013-04-07 08:29:10 kidwon

使用此： -

function hideshow() 
{ 
var s1= document.getElementById('OperationType'); 
var s2= document.getElementById('OperationNos'); 

if(s1.options[s1.selectedIndex].text=="Operation No") 
{ 
s2.style.visibility = 'visible'; 
document.getElementById('t1').style.visibility = 'hidden'; 
} 
if(s1.options[s1.selectedIndex].text=="Employee No") 
{ 
s2.style.visibility = 'hidden'; 
document.getElementById('t1').style.visibility = 'visible'; 
} 
} 
function hide() 

{ 

document.getElementById('t1').style.visibility = 'hidden'; 
}

HTML代碼： -

<body onload="hide()"> 

<select id="OperationType" onChange="hideshow()"> 
<option value="OpNo">Operation No</option> 
<option value="OpEmp">Employee No</option> 
</select> 

<select id="OperationNos"> 
<option value="1001">1001</option> 
<option value="1002">1002</option> 
</select> 

<input type="text" id="t1" /> 
</body>

來源

2013-04-07 08:32:59

使用JavaScript來隱藏和顯示下拉菜單和文本字段

回答

相關問題