javascript afficher masquer sélectionner de

J'essaie de montrer une autre sélection de quand l'utilisateur sélectionne une sélection de, par exemple si l'utilisateur sélectionne des produits alors une autre boîte de sélection apparaît avec les types de produits. Voici mon codejavascript afficher masquer sélectionner de

<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>

Source

2010-11-16 Ergun Polat

Quelle est votre question? –

Êtes-vous prêt à utiliser jQuery et Ajax? –

Je pense que votre après quelque chose comme ça

<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; 
    } 
}

Source

2010-11-16 14:25:27

Cest exactement ce que je cherche je vous remercie beaucoup –

Content de pouvoir aider. JQuery rend cette fonctionnalité beaucoup plus facile. Vous pourriez vouloir regarder dans cela. –

Je change votre script pour ressembler à ceci:

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

Et changer votre entrée à:

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

De cette façon, vous avez une référence à l'élément lui-même. Avant que vous essayiez d'obtenir un élément avec un ID de internet qui n'existait pas.

Source

2010-11-16 14:22:53 sholsinger

Merci qui a fait l'affaire –

javascript afficher masquer sélectionner de

Répondre

Questions connexes