Afficher/masquer dans la liste déroulante basée sur la sélection d'une autre dans la liste déroulante
Oui, j'ai essayé de chercher la réponse à ce problème et j'ai trouvé beaucoup de questions similaires, mais aucun d'eux ne semblait m'aider.
J'ai la liste déroulante avec quelques options, et lorsque l'utilisateur sélectionne une option, un autre dans la liste déroulante apparaît avec de bons choix. Oui, c'était la partie facile, mais j'ai besoin d'envoyer des options sélectionnées à un serveur et que la partie la plus délicate pour moi. J'ai créé deux listes déroulantes qui pop-up après que l'utilisateur a sélectionné une option dans le "principal" dans la liste déroulante. Le problème est que les valeurs correctes va sur le serveur uniquement à partir de la première liste qui apparaît. Si je choisis de la valeur à partir de la 2ème liste qui apparaît, la première option de la 1ère liste de 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 sélectionne mâle S à ma chemise. - Je recevoir la valeur "femaleXS" dans le serveur. Mais si je sélectionne féminin S à ma chemise, passe correctement sur le serveur. Seule la valeur de la 1ère jusqu'à éclater liste passe correctement sur le serveur.
Ok, alors j'ai décidé de faire une seule liste qui s'affiche, puis cette liste aurait toutes les options. Je voudrais simplement cacher les mauvaises options en fonction du type de chemise que l'utilisateur sélectionne. Le problème est, je n'ai plus de JS compétences 🙂 Ce code JS que j'utilise, j'ai obtenu de ici.
M'aider. Je suppose qu'une liste déroulante avec les valeurs cachées serait le meilleur choix mais je ne sais pas comment le faire 😛
- Seriez-vous ouvert à l'aide d'une bibliothèque JavaScript comme jQuery. Il fera de votre vie incroyablement facile pour cela. Aussi, Knockout.js est défini en grande partie à cet effet.
- À l'aide de bibliothèques JS comme jQuery est très bien et merci pour l'astuce sur Knockout.js.
Vous devez vous connecter pour publier un commentaire.
Votre code javascript qui pourrait être beaucoup plus simple, mais il suffit de répondre à votre question d'ajouter:
après:
Et d'ajouter:
après:
Puis ajouter désactivé à la fois caché sélectionner des étiquettes.
Comme:
désactivé signifie qu'il n'est pas envoyé au serveur.