JavaScript顯示隱藏從

我想顯示另一個選擇，從用戶選擇一個選擇，例如，如果用戶選擇產品，然後出現另一個選擇框與產品類型。這裏是我的代碼JavaScript顯示隱藏從

<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<title>TestPage</title> 

<script type="text/javascript"> 
function ProductSelection() { 
var selectedValue = document.getElementById("internet").value; 
if(selectedValue == "Matchcode") 
document.getElementById("Types").style.display = ""; 
if(selectedValue == "Kaleidoscope") 
document.getElementById("Kaleidoscopes").style.display = ""; 
} 
</script> 
</head> 
<body> 
<table align="center"> 
     <form id="form1" name="form1" method="post" action="process.php"> 
     <tr><td>Products</td> 
     <td> 
    <select name="Products" id="Products" onChange="ProductSelection();"> 
    <option>Select a product....</option> 
     <option value="Matchcode">Matchcode</option> 
     <option value="Nearcode">Nearcode</option> 
     <option value="Kaleidoscope">Kaleidoscope Plus</option> 
     <option value="Kaleidoscope">Matchcode Kaleidoscope</option> 
     </select> 
     </td> 
    </tr> 
    <tbody id="Types" style="display:none"> 
    <tr><td>Type:</td> 
    <td><select name="Types" id="Types" title="Types"> 
    <option value="UK">UK</option> 
    <option value="USA">USA</option> 
    <option value="Canada">Canada</option> 
    <option value="DNB">DNB</option> 
    <option value="Names">Names</option> 
    </select></td></tr></tbody> 
    <tbody id="Kaleidoscopes" style="display:none"> 
    <tr><td>Type:</td> 
    <td><select name="Kaleidoscopes" id="Kaleidoscopes" title="Kaleidoscopes"> 
    <option value="New Zealand">New Zealand</option> 
    </select> 
    </td></tr></tbody> 


    <tr><td>Computers:</td> 
    <td> 
    <select name="Computers" id="Computers" title="Computers"> 
     <option value="QA-N1">QA-N1</option> 
     <option value="QA-N2">QA-N2</option> 
    </select> 
</td></tr> 
<tr> 
    <td>Keys:</td> 
    <td> <input name="Key" type="text" title="Key" /> 
    <input type="submit" name="Save" id="Save" value="Save"/> 
</td> 
</tr> 
    </form></table> 


</body> 
</html>

來源

2010-11-16 Ergun Polat

什麼是你的問題後？ – 2010-11-16 14:19:33

你是否願意使用jQuery和Ajax？ – 2010-11-16 14:23:13

我覺得你是這樣的

<select name="Products" id="Products" onChange="ProductSelection(this);"> 

function ProductSelection(element) { 
    var selectedValue = element.value 
    if(selectedValue == "Matchcode") { 
     document.getElementById("Types").style.display = "inline"; 
     document.getElementById("Kaleidoscopes").style.display = "none"; 
     //hide other elements that need to be hidden; 
    } 
    if(selectedValue == "Kaleidoscope") { 
     document.getElementById("Kaleidoscopes").style.display = "inline"; 
     document.getElementById("Types").style.display = "none"; 
     //hide other elements that need to be hidden; 
    } 
    if(selectedValue == "Nearcode") { 
     document.getElementById("Kaleidoscopes").style.display = "none"; 
     document.getElementById("Types").style.display = "none"; 
     //hide other elements that need to be hidden; 
    } 
}

來源

2010-11-16 14:25:27

這就是我想要的非常感謝你 – 2010-11-16 14:57:27

很高興我能幫上忙。 jQuery使這樣的功能很容易順便。你可能想看看。 – 2010-11-16 15:00:53

我會改變你的腳本是這樣的：

function ProductSelection(el) { 
    var selectedValue = el.value; 
    if(selectedValue == "Matchcode") 
    document.getElementById("Types").style.display = ""; 
    if(selectedValue == "Kaleidoscope") 
    document.getElementById("Kaleidoscopes").style.display = ""; 
}

，改變你的輸入是：

<select name="Products" id="Products" onChange="ProductSelection(this);">

這樣的話，你有一個參考元素本身。在嘗試獲取ID不是internet的元素之前。

來源

2010-11-16 14:22:53 sholsinger

謝謝你的訣竅 – 2010-11-16 14:45:57

JavaScript顯示隱藏從

回答

相關問題