1178 sujets

Accessibilité du Web

[résolu] Liste et sous-liste sans Ajax, c'est possible ?

Bonjour,
Sur un formulaire classique, j'ai une liste <select> de catégories de métiers. Quand on en sélectionne un, l'idée est de faire apparaitre une seconde liste contenant les métiers appartenant à la catégorie choisie. Rien d'exceptionnel, donc. En utilisant ajax/jquery/php, ça ne présente pas de difficulté majeure.
Mon souci, c'est que je préférerais que ça fonctionne justement sans utiliser du tout ajax et JS. En utilisant un get et en changeant de page, on doit pouvoir le faire, mais y a-t-il un moyen de faire ça proprement et d'une façon très accessible en une seule page ? Peut-être en chargeant toutes les sous-listes et en les masquant en CSS ?
Auriez-vous des suggestions ?
Merci !
Modifié par Mendoza (18 Oct 2012 - 17:28)
Salut,

En l'absence de JavaScript, il faut que tes deux éléments select apparaissent dans le code source, le second select pouvant être construit de manière à regrouper les options pour plus de clarté, comme suit :
<!-- Ton premier select -->
<label for="categorie">Choisir une catégorie</label>
<select id="categorie" name="categorie">
  <option>Créatifs</option>
  <option>Codeurs</option>
  <option>Conseils</option>
</select>

<!-- Ton second select -->
<label for="metiers">Choisir un métier</label>
<select id="metiers" name="metiers">
  <optgroup label="Créatifs">
    <option>Graphiste</option>
    <option>Webdesigner</option>
  </optgroup>
  <optgroup label="Codeurs">
    <option>Intégrateur (X)HTML / CSS</option>
    <option>Développeur PHP</option>
    <option>Développeur Action Script</option>
  </optgroup>
  <optgroup label="Conseils">
    <option>Expert en accessibilité</option>
    <option>Ergonome</option>
  </optgroup>
</select>

Là, il s'agit du code source pur et dur, pour ainsi dire.

Ensuite, en JavaScript, il te suffira d'ôter du DOM le second select (ou le masquer avec display: none, à la rigueur) et d'en modifier dynamiquement la structure, de façon à n'afficher que les éléments option correspondant à la catégorie sélectionnée (si le select est masqué, tu l'affiches et tu n'as pas besoin d'Ajax ; si tu l'as préalablement ôté, tu le recrées dans le DOM et Ajax sera ton ami pour chercher les bonnes options).
Je vois la démarche, merci. Je vais tâcher de l'appliquer cet après-midi et reviendrai marquer comme résolu Smiley cligne
Sujet clos
Aller à