{"id":124666,"date":"2022-11-16T17:37:54","date_gmt":"2022-11-16T16:37:54","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-custom-select-list\/"},"modified":"2025-02-03T16:44:45","modified_gmt":"2025-02-03T15:44:45","slug":"how-to-create-a-custom-select-list","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-design-data-select-component","title":{"rendered":"Comment concevoir un Select ax\u00e9 sur les donn\u00e9es ?"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Vous apprendrez ici \u00e0 concevoir un composant Select pilot\u00e9 par les donn\u00e9es.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73408287\/index.html\" width=\"820px\" height=\"370px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span data-preserver-spaces=\"true\">Voici comment le construire :<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Voir<\/span><\/strong><\/h3>\n<ul>\n<li>Placez un \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb sur le canevas, double-cliquez dessus et \u00e9crivez \u00ab\u00a0Entr\u00e9e\u00a0\u00bb. Allez dans la palette Propri\u00e9t\u00e9s et dans l&rsquo;option \u00ab\u00a0Modifiable\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Non\u00a0\u00bb dans le menu d\u00e9roulant. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-1.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Dans la biblioth\u00e8que \u00ab\u00a0Composants Web\u00a0\u00bb, faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Chevron vers le bas\u00a0\u00bb et placez-la au-dessus du \u00ab\u00a0Champ de texte de saisie\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-2.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Sous le \u00ab\u00a0champ de texte de saisie\u00a0\u00bb, placez un \u00ab\u00a0rectangle\u00a0\u00bb qui servira d&rsquo;arri\u00e8re-plan aux options d\u00e9roulantes. Au-dessus, placez quatre autres rectangles et alignez-les, un pour chaque option. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-3.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Dans la palette Propri\u00e9t\u00e9s, d\u00e9sactivez la couleur d&rsquo;arri\u00e8re-plan des quatre rectangles et ne laissez que la bordure \u00ab\u00a0Bas\u00a0\u00bb active dans les trois premiers. Pour le quatri\u00e8me rectangle, d\u00e9sactivez les bordures sur tous les c\u00f4t\u00e9s. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-4.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Double-cliquez sur chaque rectangle et \u00e9crivez \u00ab\u00a0\u00c9l\u00e9ment 1\u00a0\u00bb, \u00ab\u00a0\u00c9l\u00e9ment 2\u00a0\u00bb, \u00ab\u00a0\u00c9l\u00e9ment 3\u00a0\u00bb et \u00ab\u00a0\u00c9l\u00e9ment 4\u00a0\u00bb. Allez dans la palette Propri\u00e9t\u00e9s, donnez au texte l&rsquo;alignement gauche et modifiez le remplissage gauche. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-5.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>S\u00e9lectionnez le \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb, allez dans la palette Propri\u00e9t\u00e9s et modifiez la couleur de la \u00ab\u00a0Bordure\u00a0\u00bb et le \u00ab\u00a0Rond\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-6.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>S\u00e9lectionnez les rectangles dans les options d\u00e9roulantes, allez dans la palette Propri\u00e9t\u00e9s et modifiez la couleur de la bordure.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-7.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>S\u00e9lectionnez le rectangle qui sert d&rsquo;arri\u00e8re-plan \u00e0 la liste d\u00e9roulante, allez dans la palette Propri\u00e9t\u00e9s et modifiez la couleur de l&rsquo;arrondi et de la bordure. Ensuite, allez dans Effets dans la m\u00eame palette et cliquez sur \u00ab\u00a0+\u00a0\u00bb. Une ombre port\u00e9e sera ajout\u00e9e par d\u00e9faut. Cliquez sur l&rsquo;ic\u00f4ne Param\u00e8tres pour modifier l&rsquo;ombre.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-8.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<li>S\u00e9lectionnez les quatre cases d&rsquo;options et la case d&rsquo;arri\u00e8re-plan, faites un clic droit et cliquez sur \u00ab\u00a0Grouper\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-9.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<li>Allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0Cacher dans la simulation\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-hide.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<h3>Ev\u00e9nements<\/h3>\n<p>S\u00e9lectionnez le \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-10.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir l&rsquo;action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Afficher l&rsquo;\u00e9l\u00e9ment cach\u00e9\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Groupe\u00a0\u00bb qui comprend les options de la liste d\u00e9roulante.<\/span><\/li>\n<li>En bas, s\u00e9lectionnez l&rsquo;effet \u00ab\u00a0Slide up\u00a0\u00bb, avec un type d&rsquo;assouplissement \u00ab\u00a0Swing\u00a0\u00bb et une dur\u00e9e de 300 ms pour donner au menu d\u00e9roulant une animation fluide.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-11.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Le champ de saisie \u00e9tant s\u00e9lectionn\u00e9, retournez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-12.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Modifier le style\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Champ de texte de saisie\u00a0\u00bb.<\/span><\/li>\n<li>Dans le menu inf\u00e9rieur, s\u00e9lectionnez la couleur de la bordure et l&rsquo;\u00e9paisseur que l&rsquo;entr\u00e9e aura lorsqu&rsquo;elle sera s\u00e9lectionn\u00e9e. Pour cet exemple, choisissez une couleur bleue pour la bordure et une \u00e9paisseur de 2px. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-13.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Le champ de saisie \u00e9tant s\u00e9lectionn\u00e9, retournez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-14.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Rotation\u00a0\u00bb et choisissez l&rsquo;ic\u00f4ne \u00ab\u00a0Chevron vers le bas\u00a0\u00bb.<\/span><\/li>\n<li>Dans la partie inf\u00e9rieure, modifiez l&rsquo;angle pour qu&rsquo;il tourne de 180\u00ba, et s\u00e9lectionnez un type d&rsquo;assouplissement \u00ab\u00a0Swing\u00a0\u00bb, avec une vitesse de 300ms pour donner \u00e0 l&rsquo;ic\u00f4ne un effet d&rsquo;animation fluide.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-15.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Dans la palette \u00c9v\u00e9nements, passez en mode \u00ab\u00a0AVEC pr\u00e9c\u00e9dent\u00a0\u00bb entre chacun des \u00e9v\u00e9nements, afin qu&rsquo;ils se produisent tous en m\u00eame temps.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-16.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<p>S\u00e9lectionnez le rectangle avec le texte \u00ab\u00a0Item 1\u00a0\u00bb, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-17.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set value to an element\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Input text field\u00a0\u00bb.<\/span><\/li>\n<li>S\u00e9lectionnez le bouton radio avec l&rsquo;option \u00ab\u00a0Calcul\u00e9\u00a0\u00bb, et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-18.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Dans le g\u00e9n\u00e9rateur d&rsquo;expression, faites glisser le rectangle \u00ab\u00a0Item 1\u00a0\u00bb vers le premier champ, de sorte que la s\u00e9lection de la premi\u00e8re option mette \u00e0 jour le \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb avec le texte que le rectangle contient. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb \u00e0 nouveau pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\"><source src=\"\" type=\"\"><\/source><img decoding=\"async\" src=\"\" alt=\"\">Constructeur d&rsquo;expression<\/video> <\/p>\n<p>Le rectangle \u00ab\u00a0Item 1\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Masquer l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Groupe\u00a0\u00bb qui comprend les options de la liste d\u00e9roulante.<\/span><\/li>\n<li>En bas, s\u00e9lectionnez l&rsquo;effet \u00ab\u00a0Glisser vers le haut\u00a0\u00bb, avec un type d&rsquo;assouplissement \u00ab\u00a0Swing\u00a0\u00bb et une dur\u00e9e de 300 ms. En cliquant sur l&rsquo;une des options, vous fermerez la liste d\u00e9roulante avec une animation fluide. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-20.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Le rectangle \u00ab\u00a0Item 1\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Rotation\u00a0\u00bb et choisissez l&rsquo;ic\u00f4ne \u00ab\u00a0Chevron vers le bas\u00a0\u00bb.<\/span><\/li>\n<li>Dans la partie inf\u00e9rieure, modifiez l&rsquo;angle pour qu&rsquo;il tourne de 0\u00ba, et s\u00e9lectionnez un type d&rsquo;assouplissement \u00ab\u00a0Swing\u00a0\u00bb, avec une vitesse de 300ms pour donner \u00e0 l&rsquo;ic\u00f4ne un effet d&rsquo;animation fluide. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-21.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Le rectangle \u00ab\u00a0Item 1\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0<span style=\"font-weight: 400;\">Modifier le style<\/span>\u00a0\u00bb et s\u00e9lectionnez le <span style=\"font-weight: 400;\">\u00ab\u00a0Champ de texte de saisie\u00a0\u00bb.<\/span><\/span><\/li>\n<li>En bas, laissez la couleur et la taille de la bordure par d\u00e9faut (1). Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-22.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Dans la palette \u00c9v\u00e9nements, passez en mode \u00ab\u00a0AVEC pr\u00e9c\u00e9dent\u00a0\u00bb entre chacun des \u00e9v\u00e9nements, afin qu&rsquo;ils se produisent tous en m\u00eame temps.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-23.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<p>Dans la palette \u00c9v\u00e9nements, cliquez sur \u00ab\u00a0Copier tous les \u00e9v\u00e9nements\u00a0\u00bb, s\u00e9lectionnez le rectangle avec le texte \u00ab\u00a0Item 2\u00a0\u00bb et cliquez sur le bouton \u00ab\u00a0Coller tous les \u00e9v\u00e9nements\u00a0\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.png\" alt=\"Copier-coller d'\u00e9v\u00e9nements\">Copier-coller des \u00e9v\u00e9nements<\/video><\/p>\n<p>Modifiez la cible de l&rsquo;\u00e9v\u00e9nement \u00ab\u00a0Set value to an element\u00a0\u00bb. Allez dans l&rsquo;expression de l&rsquo;\u00e9v\u00e9nement et, dans le constructeur, faites glisser le rectangle \u00ab\u00a0Item 2\u00a0\u00bb vers le premier champ. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb \u00e0 nouveau pour modifier l&rsquo;\u00e9v\u00e9nement. Les autres actions restent les m\u00eames.   <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-25.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<p>R\u00e9p\u00e9tez l&rsquo;op\u00e9ration pour chacune des autres options de la liste d\u00e9roulante.<\/p>\n<p>Simulez votre prototype.<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous apprendrez ici \u00e0 concevoir un composant Select pilot\u00e9 par les donn\u00e9es. Voici comment le construire : Voir Placez un \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb sur le&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8428],"tags":[],"class_list":["post-124666","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124666"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124666"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124666\/revisions"}],"predecessor-version":[{"id":126192,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124666\/revisions\/126192"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}