Oui, j'ai essayé de chercher une réponse à ce problème et j'ai trouvé de nombreuses questions similaires, mais aucune d'entre elles n'a semblé m'aider.Afficher/masquer la liste déroulante en fonction de la sélection d'une autre liste déroulante
J'ai une liste déroulante avec peu d'options et quand l'utilisateur sélectionne une option, une autre liste déroulante apparaît avec des choix corrects. Oui, c'était la partie facile mais j'ai besoin d'envoyer des options choisies à un serveur et c'est la partie difficile pour moi. J'ai créé deux listes déroulantes différentes qui apparaissent une fois que l'utilisateur a sélectionné une option dans la liste déroulante "principale". Le problème est que les valeurs correctes ne vont au serveur qu'à partir de la première liste qui apparaît. Si je choisis la valeur de la 2ème liste qui apparaît, la première option de la 1ère liste va au serveur.
Voici mon code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.hiddenMenu {display: none;}
.visibleMenu {display: inline;}
</style>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenMenu";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleMenu";
lastDiv = divName;
}
}
</script>
</head>
<body>
<form action="http://url.here" method="post" enctype="multipart/form-data">
<label for="shirttype">T-shirt </label>
<select name="category" id="shirttype" onchange="showDiv(this.value);">
<option value="">Choose type…</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<br/>
<p id="female" class="hiddenMenu">
<label for="shirtsizefemale">Size </label>
<select name="subjectCategory" id="shirtsizefemale">
<option value="femaleXS">XS</option>
<option value="femaleS">S</option>
</select>
</p>
<p id="male" class="hiddenMenu">
<label for="shirtsizemale">Size </label>
<select name="subjectCategory" id="shirtsizemale">
<option value="maleXS">XS</option>
<option value="maleS">S</option>
</select>
</p>
<br/>
<input type="submit" value="Upload">
</form>
</body>
</html>
Donc, si je choisis des hommes S pour être ma chemise. Je reçois la valeur "femaleXS" dans le serveur. Mais si je choisis la femelle S pour être ma chemise, la valeur va correctement au serveur. Seule la valeur de la première liste déroulante va correctement sur le serveur. Ok, alors j'ai décidé de faire une seule liste qui apparaît et cette liste aurait toutes les options. Je voudrais simplement cacher les mauvaises options en fonction du type d'utilisateur de chemise sélectionné. Le problème est, je manque de compétences JS :) Ce code JS que j'utilise je l'ai eu de here.
Aidez-moi. Je suppose que d'une liste déroulante avec des valeurs cachées serait le meilleur choix mais je ne sais pas comment le faire: P
Seriez-vous ouvert à l'utilisation d'une bibliothèque JavaScript comme jQuery. Cela rendra votre vie incroyablement plus facile pour cela. En outre, Knockout.js est défini en grande partie à cet effet. – ghayes
L'utilisation de bibliothèques JS comme jQuery est très bien et merci pour l'astuce à propos de Knockout.js. – nqw1