Comment utiliser un composant d'interface utilisateur DropDownList dans votre application Web

Apprenez ce que vous pouvez faire avec une liste déroulante et comment en utiliser une dans votre application Web pour aider vos utilisateurs à choisir facilement parmi une liste d'options.

Récemment, nous avons parlé de composant séparateur et le composant de grille . Dans les prochains articles, nous passerons en revue les composants utilisés pour effectuer des sélections et saisir des données. Le premier sera la liste déroulante.

Une liste déroulante permet aux utilisateurs de sélectionner une option dans une liste d'options. La liste apparaît lorsque l'utilisateur clique sur l'élément ou le déclenche autrement. L'option actuellement sélectionnée sera toujours affichée dans l'élément. Les listes déroulantes peuvent être utilisées dans les magasins en ligne pour choisir la taille, la couleur ou la quantité d'un article. Ils sont également utilisés dans les barres d’outils pour sélectionner différentes actions telles que la modification de la police ou du zoom de la page. À venir, vous verrez comment créer une liste déroulante en utilisant HTML et comment en créer un à l'aide du composant Interface Kendo UQ jQuery DropDownList .

Liste déroulante HTML

Liste déroulante simple peut être créé en utilisant la balise `select`. Vous définissez les éléments de votre liste en ajoutant des balises `option` dans l'élément` select`. Le texte ou le modèle visible par l'utilisateur est le contenu entre les balises `option`. L'attribut `value` de l'option` correspond aux données qui seront envoyées avec une soumission de formulaire ou que vous pouvez extraire directement. Comme un élément select est une sorte d'élément de formulaire, il prend en charge les événements de formulaire tels que l'événement `onchange`. Voici le balisage d'une liste déroulante contenant trois éléments:

liste déroulante" title = "dropdown01" />

Ceci afficherait« 1 »sur la console. Si vous souhaitez obtenir la valeur de l'option sélectionnée, vous pouvez également ajouter un écouteur d'événement à l'élément select. Nous allons attacher un écouteur d'événement `onchange` capable de capturer l'option sélectionnée et de nous donner sa valeur.

Kendo UI DropDown List

Pour transformer cette liste déroulante HTML en liste déroulante Kendo UI, il suffit d'appeler $ ('# dropdown'). kendoDropDownList () . Faire cela styles le composant pour correspondre au reste de votre thème. De plus, vous aurez accès à différentes options de configuration qui faciliteront la personnalisation de l'élément. Par exemple, vous pouvez utiliser l'attribut `dataSource` pour définir votre liste d'options ou les récupérer à partir d'une URL. Ceci est un exemple complet qui refactore notre liste déroulante pour utiliser un tableau d'éléments pour définir les options:

Si nous voulons lier un événement de modification au composant, nous pouvons ajouter un champ` change` à notre code d'initialisation et le définir égal à un gestionnaire d'événement. Semblable à notre exemple HTML, cet exemple imprime la valeur de notre option sur la console lorsqu'une nouvelle sélection a été effectuée:

Résumé [19659005] La liste déroulante que nous avons utilisée ici peut sembler similaire aux listes déroulantes que nous avons utilisées dans notre composant de menu . La principale différence avec le composant liste déroulante est que l'élément actuellement sélectionné est toujours exposé et que l'objectif est d'indiquer que l'utilisateur peut basculer entre les options. Dans un menu, le but d'une liste déroulante est de vous diriger vers une autre zone de votre application. Et une liste déroulante utilisée dans un menu contextuel n'est exposée que lorsque l'utilisateur clique sur la cible. Une liste déroulante est, cependant, une fonctionnalité similaire à un bouton fractionné qui est inclus dans le composant de barre d'outils . Sauf que la liste déroulante peut être autonome ou être incluse dans d'autres composants.

Vous pouvez également faire beaucoup plus avec la liste déroulante que ce qui a été affiché. Vous pouvez ajouter une barre de recherche à votre liste déroulante pour filtrer la liste des options. Ceci est utile lorsque vous avez une longue liste d'options et que l'utilisateur doit faire défiler pour les voir toutes. Vous pouvez également créer des listes déroulantes en cascade dans lesquelles les options de la liste déroulante enfant sont modifiées en fonction de la sélection de la liste déroulante parent. Une utilisation commune pour cela est la sélection des emplacements. Une liste déroulante peut contenir une liste d'états et la liste déroulante suivante contiendra les villes correspondant à cette liste d'états.

Dans la prochaine leçon, nous examinerons le composant multiselect. Ce composant est similaire à une liste déroulante, mais il nous permet de sélectionner plusieurs options dans une liste.

Essayez DropDownList pour vous-même

Vous souhaitez commencer à tirer parti de Interface utilisateur Kendo jQuery DropDownList ou l'un des 70 autres composants de l'interface utilisateur Kendo prête à l'emploi, comme Grid ou Scheduler ? Vous pouvez commencer un essai gratuit du Kendo UI dès aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrage de mon essai d’interface utilisateur Kendo

Versions angulaire, de réaction et de vue

Vous recherchez un composant d’interface utilisateur prenant en charge des environnements spécifiques? Consultez le DropDownList pour Angular, DropDownList pour React ou DropDownList pour Vue .

Ressources

---