Sélection de la langue

Gouvernement du Canada / Government of Canada

Manuel de conception de l'Infobase Santé

  Table des matières

Table des matières


Table des matières

Sélecteur déroulant

Les sélecteurs déroulants permettent aux utilisateurs de choisir parmi différentes options.

Sur cette page

Quand utiliser cette composante

  • Utilisez les sélecteurs déroulants pour permettre aux utilisateurs de choisir parmi 5 options ou plus dans une visualisation de données.

Quoi éviter

  • Évitez de surcharger les utilisateurs avec trop d'options de sélection.

Design et code

Choisissez un type:
HTML 
<!-- Noter que les options pourraient être générées de façon dynamique -->

<select multiple id="multiSelectExample">
 <option class="actionBtn" value="selectAll">Tout sélectionner</option>
 <option class="actionBtn" value="deselectAll">Tout désélectionner</option>
 <option>Pomme</option>
 <option>Orange</option>
 <option>Raisin</option>
 <option>Banane</option>
</select>
CSS 
 .actionBtn {
    /*background-color: lightgray;*/
    border: 1px solid lightgray;
    /*font-weight: bold;*/
    margin: 3px;
    border-radius: 4px;
}

.bootstrap-select>.dropdown-toggle {
    background: white;
    border: 3px solid black;
}
  
  .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 250px;
}
JS 
<<!-- Ajouter ces références -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/src/js/bootstrap-select/bootstrap-select.js"></script>

<!-- Ajouter ce script-->
<script>
// multiSelectExample
            var language = document.documentElement.lang;
            $(document).ready(function(){
                
            $('#multiSelectExample').addClass("selectpicker")
            
            if (language == "en") {	
			$('#multiSelectExample').selectpicker({	
				dropdownAlignRight: true,	
				dropupAuto: false,	
				selectedTextFormat: "count",	
				size: 10,	
				liveSearch: true,	
				noneSelectedText: "No fruits selected",	
				countSelectedText: "{0} fruits selected",	
				// width: "100%"	
				// actionsBox: true,	
				// selectAllText: "Select all",	
				// deselectAllText: "Deselect all",	
			});	
		}	
		else {	
		    
			$('#multiSelectExample').selectpicker({	
				dropdownAlignRight: true,	
				dropupAuto: false,	
				selectedTextFormat: "count",	
				size: 10,	
				liveSearch: true,	
				noneSelectedText: "Pas de fruits selectionnés",	
				countSelectedText: "{0} fruits selectionnés",	
				// actionsBox: true,	
				// selectAllText: "Tout sélectionner",	
				// deselectAllText: "Tout désélectionner",	
			});	
		}
		

  $("#multiSelectExample").on("change", function(e, clickedIndex, newValue, oldValue) {
      var sel = $(this).val() || [];
      console.log(sel)
      //console.log(sel)	
      if (sel.indexOf("selectAll") > -1) {
          $('#multiSelectExample').selectpicker('val', ["Pomme", "Orange", "Raisin", "Banane"]);
          $('#multiSelectExample').selectpicker("refresh")
      }
      else if (sel.indexOf("deselectAll") > -1) {
          $('#multiSelectExample').selectpicker('val', []);
          $('#multiSelectExample').selectpicker("refresh")
      }
      
  })
  })
</script>

de de COVID-19,

HTML 
<h3>
<label for="dropdownType3" class="wb-inv">Types de statistiques</label>
<select id="dropdownType3" class="form-control dropdown form-inline">
  <optgroup label="Types de statistiaues">
    <option selected value="num" class="toggleBtns">Nombre</option>
    <option value="rate" class="toggleBtns">Taux</option>
  </optgroup>
</select>
<span class="titleNumMod">of</span>
<label for="dropdownType1" class="wb-inv">Types de mesures</label>
<select id="dropdownType1" class="form-control dropdown form-inline">
  <optgroup label="Types de mesures">
    <option value="cases_total" class="toggleBtns">cas totaux</option>
    <option selected value="cases_weekly" class="toggleBtns">cas (depuis la dernière semaine)</option>
    <option value="cases_last14" class="toggleBtns">cas (depuis les 2 dernières semaines)</option>
    <option value="deaths_total" class="toggleBtns">décès totaux</option>
    <option value="deaths_weekly" class="toggleBtns">décès (depuis la dernière semaine)</option>
    <option value="deaths_last14" class="toggleBtns">décès (depuis les 2 dernières semaines)</option>
  </optgroup>  </select>
<span class="numArticle">de</span> COVID-19, <label for="dropdownType4" class="wb-inv">Types of statistics</label>
<select id="dropdownType4" class="form-control dropdown form-inline">
  <optgroup label="Types de statistiques">
    <option selected value="pt" class="toggleBtns">province/territoire</option>
    <option value="hr" class="toggleBtns">région de santé</option>
  </optgroup>
</select>
</h3>
CSS 
.dropdown {
display:inline; 
font-size:1.1em; 
color:#333; 
height:39px;
padding:3px 9px;
}

Lignes directrices sur le contenu et le design

  • En général, s'il n'y a qu'une seule sélection à faire et moins de 5 options parmi lesquelles sélectionner, utilisez des boutons radio ou des cases à cocher simples plutôt qu'un sélecteur déroulant.
  • S'il y a plusieurs sélections à faire, vous pouvez utiliser des sélecteurs déroulants pour chaque option.
  • Lorsque cela est possible, considérez l'intégration des options dans une phrase.
  • Suivez les lignes directrices générales sur le design.

Lignes directrices sur l'accessibilité

Date de modification :