網頁即時隱藏或顯現某物件 (使用 選取清單 + onchange)
網頁即時隱藏或顯現某物件在網頁某些資料選取後，可能需要依所選的資料不同，即時顯示不同的資料或須輸入額外的資料。在此才疏學淺的笨兔以【選取清單】方式，配合 onchange( ) 來展示一下唄！若對您有所幫助，就 + - 用唄！^ ^
範例：主要看紅色字部份，或直接複製所有程式碼，另存成一個 html 檔來觀看唄 ^^
<html>
<head>
<meta charset="utf-8" />
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - 網頁即時隱藏或顯現某物件 (使用 選取清單)</title>
<script>
function SelectTest(){
document.getElementById('textA').style.display='none'; //隱藏欄位
document.getElementById('span1').textContent=''; //清除文字
if(document.getElementById('selectA').value=='標題B'){
document.getElementById('textA').style.display='inline'; //顯現id=textA欄位
}else if(document.getElementById('selectA').value=='標題C'){
document.getElementById('span1').textContent='喵喵笨兔'; //id=span1區塊顯示文字
}
}
</script>
</head>
<body>
<select name="selectA" id="selectA" onChange="SelectTest()">
<option value="標題A">不顯現</option>
<option value="標題B">顯現欄位</option>
<option value="標題C">顯現文字</option>
</select>
<input name="textA" type="text" id="textA" style="display: none" placeholder="請輸入資料">
<span id="span1"></span>
</body>
</html>
範例結果：