{"id":124682,"date":"2022-11-16T17:19:58","date_gmt":"2022-11-16T16:19:58","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-dependent-select\/"},"modified":"2025-02-03T16:44:36","modified_gmt":"2025-02-03T15:44:36","slug":"how-to-create-a-dependent-select","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-prototype-dependent-select","title":{"rendered":"Comment prototyper une s\u00e9lection d\u00e9pendante"},"content":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une s\u00e9lection d\u00e9pendante.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73112456\/index.html\" width=\"820px\" height=\"430px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3><b>Voir<\/b><\/h3>\n<ul>\n<li style=\"list-style-type: none;\">\n \t<\/li>\n<li>Placez deux \u00ab\u00a0Select\u00a0\u00bb de la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb sur le canevas.<span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70562\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-1.png\" alt=\"Modifier les valeurs 1\" width=\"1144\" height=\"553\"><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n \t<\/li>\n<li>Cliquez sur le premier \u00ab\u00a0Select\u00a0\u00bb, acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s et modifiez les valeurs.<span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70562\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-2.png\" alt=\"Modifier les valeurs 1\" width=\"1144\" height=\"553\"><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n \t<\/li>\n<li>Remplacez les valeurs par d\u00e9faut en double-cliquant dessus, et \u00e0 leur place, tapez les noms des pays (USA, Royaume-Uni, Allemagne).<span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70562\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-3.png\" alt=\"Modifier les valeurs 1\" width=\"1144\" height=\"553\"><\/span><\/li>\n<\/ul>\n<h3><b>\u00c9v\u00e9nement<\/b><\/h3>\n<p><span data-preserver-spaces=\"true\">Le premier \u00ab\u00a0Select\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, allez dans la palette \u00ab\u00a0Events\u00a0\u00bb et cliquez sur \u00ab\u00a0Add event\u00a0\u00bb.<\/span><br \/>\n<span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70562\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-4.png\" alt=\"Modifier les valeurs 1\" width=\"1144\" height=\"553\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb dans la bo\u00eete de dialogue et s\u00e9lectionnez \u00ab\u00a0on Change\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 cliquez sur le second \u00ab\u00a0Select\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Pour la valeur fixe, vous devez ajouter les villes de l&rsquo;un des pays que vous avez d\u00e9finis dans la premi\u00e8re \u00ab\u00a0Liste de s\u00e9lection\u00a0\u00bb (pour les \u00c9tats-Unis, vous pouvez maintenant saisir New York, Washington DC et Chicago).  <\/span>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-70564\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-5.png\" alt=\"villes dp1\" width=\"833\" height=\"304\"><\/li>\n<\/ol>\n<p>Retournez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter une condition\u00a0\u00bb ; le g\u00e9n\u00e9rateur d&rsquo;expressions s&rsquo;ouvre.<\/p>\n<ol>\n<li>Faites glisser le premier \u00ab\u00a0Select\u00a0\u00bb vers l&rsquo;expression, puis, \u00e0 partir de l&rsquo;onglet de la fonction logique, faites glisser le \u00ab\u00a0=\u00a0\u00bb et tapez enfin le nom du pays (USA, pour les villes que vous venez d&rsquo;ajouter dans l&rsquo;\u00e9v\u00e9nement). Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/761525037\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Retournez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Autre\u00a0\u00bb.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez \u00ab\u00a0on Change\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 cliquez sur le second \u00ab\u00a0Select\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Pour la valeur fixe, \u00e9crivez les villes pour \u00ab\u00a0Royaume-Uni\u00a0\u00bb.  <\/span>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-71713\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/dependent-select-6.png\" alt=\"cond1\" width=\"925\" height=\"293\"><\/li>\n<\/ol>\n<p>Retournez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter une condition\u00a0\u00bb ; le g\u00e9n\u00e9rateur d&rsquo;expressions s&rsquo;ouvre.<\/p>\n<ul>\n<li>Faites glisser le premier \u00ab\u00a0Select\u00a0\u00bb vers l&rsquo;expression, puis, \u00e0 partir de l&rsquo;onglet de la fonction logique, faites glisser le \u00ab\u00a0=\u00a0\u00bb et tapez enfin \u00ab\u00a0United Kingdom\u00a0\u00bb. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/761753693\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ul>\n<p>Dans la palette \u00c9v\u00e9nements, appuyez \u00e0 nouveau sur \u00ab\u00a0Else\u00a0\u00bb pour d\u00e9finir le dernier cas comme vous l&rsquo;avez fait pr\u00e9c\u00e9demment. Simulez votre prototype.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une s\u00e9lection d\u00e9pendante. Voici comment le construire : Voir Placez deux \u00ab\u00a0Select\u00a0\u00bb de la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb&#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":[8433,8426],"tags":[],"class_list":["post-124682","post","type-post","status-publish","format-standard","hentry","category-composants-avances","category-comment-faire"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124682"}],"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=124682"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124682\/revisions"}],"predecessor-version":[{"id":126168,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124682\/revisions\/126168"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}