{"id":22283,"date":"2024-03-15T23:19:13","date_gmt":"2024-03-15T23:19:13","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/"},"modified":"2024-03-21T22:30:36","modified_gmt":"2024-03-21T22:30:36","slug":"how-to-set-the-default-value-of-a-dropdown-list-in-layui","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/","title":{"rendered":"How to set the default value of a dropdown list in layui?"},"content":{"rendered":"<p>There are two methods to set the default value for a dropdown box using Layui.<\/p>\n<p>Option: Method 1: Setting the value attribute in HTML.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"city\"<\/span> <span class=\"hljs-attr\">lay-verify<\/span>=<span class=\"hljs-string\">\"required\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"\"<\/span>&gt;<\/span>\u8bf7\u9009\u62e9\u57ce\u5e02<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"1\"<\/span> {{ <span class=\"hljs-attr\">data.city<\/span> === <span class=\"hljs-string\">'1'<\/span> ? '<span class=\"hljs-attr\">selected<\/span>' <span class=\"hljs-attr\">:<\/span> '' }}&gt;<\/span>\u5317\u4eac<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"2\"<\/span> {{ <span class=\"hljs-attr\">data.city<\/span> === <span class=\"hljs-string\">'2'<\/span> ? '<span class=\"hljs-attr\">selected<\/span>' <span class=\"hljs-attr\">:<\/span> '' }}&gt;<\/span>\u4e0a\u6d77<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"3\"<\/span> {{ <span class=\"hljs-attr\">data.city<\/span> === <span class=\"hljs-string\">'3'<\/span> ? '<span class=\"hljs-attr\">selected<\/span>' <span class=\"hljs-attr\">:<\/span> '' }}&gt;<\/span>\u5e7f\u5dde<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>In the example above, we utilized Layui&#8217;s template engine to verify if the current data value is equal to the option value. If they are equal, the selected attribute is added to indicate that the option is selected.<\/p>\n<p>Option 2: Assign values using the form module of Layui.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u521d\u59cb\u5316\u4e0b\u62c9\u6846<\/span>\r\nform.<span class=\"hljs-title function_\">render<\/span>(<span class=\"hljs-string\">'select'<\/span>);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u9ed8\u8ba4\u503c<\/span>\r\nform.<span class=\"hljs-title function_\">val<\/span>(<span class=\"hljs-string\">'selectFilter'<\/span>, {\r\n  <span class=\"hljs-string\">'city'<\/span>: <span class=\"hljs-string\">'1'<\/span> <span class=\"hljs-comment\">\/\/ \u9ed8\u8ba4\u9009\u4e2d\u5317\u4eac<\/span>\r\n});\r\n<\/code><\/pre>\n<p>In the example above, we are using the form.val() method to set the default value of the dropdown box. &#8216;selectFilter&#8217; is the value of the lay-filter attribute of the dropdown element, &#8216;city&#8217; is the value of the name attribute of the dropdown element, and &#8216;1&#8217; is the default value to be set.<\/p>\n<p>Note: When using method two, make sure to first load the form module of Layui and call the form.render(&#8216;select&#8217;) method to initialize the dropdown list.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are two methods to set the default value for a dropdown box using Layui. Option: Method 1: Setting the value attribute in HTML. &lt;select name=&#8221;city&#8221; lay-verify=&#8221;required&#8221;&gt; &lt;option value=&#8221;&#8221;&gt;\u8bf7\u9009\u62e9\u57ce\u5e02&lt;\/option&gt; &lt;option value=&#8221;1&#8243; {{ data.city === &#8216;1&#8217; ? &#8216;selected&#8217; : &#8221; }}&gt;\u5317\u4eac&lt;\/option&gt; &lt;option value=&#8221;2&#8243; {{ data.city === &#8216;2&#8217; ? &#8216;selected&#8217; : &#8221; }}&gt;\u4e0a\u6d77&lt;\/option&gt; &lt;option value=&#8221;3&#8243; {{ data.city [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22283","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to set the default value of a dropdown list in layui? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set the default value of a dropdown list in layui?\" \/>\n<meta property=\"og:description\" content=\"There are two methods to set the default value for a dropdown box using Layui. Option: Method 1: Setting the value attribute in HTML. &lt;select name=&quot;city&quot; lay-verify=&quot;required&quot;&gt; &lt;option value=&quot;&quot;&gt;\u8bf7\u9009\u62e9\u57ce\u5e02&lt;\/option&gt; &lt;option value=&quot;1&quot; {{ data.city === &#039;1&#039; ? &#039;selected&#039; : &#039;&#039; }}&gt;\u5317\u4eac&lt;\/option&gt; &lt;option value=&quot;2&quot; {{ data.city === &#039;2&#039; ? &#039;selected&#039; : &#039;&#039; }}&gt;\u4e0a\u6d77&lt;\/option&gt; &lt;option value=&quot;3&quot; {{ data.city [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T23:19:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T22:30:36+00:00\" \/>\n<meta name=\"author\" content=\"Isabella Edwards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabella Edwards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\"},\"author\":{\"name\":\"Isabella Edwards\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\"},\"headline\":\"How to set the default value of a dropdown list in layui?\",\"datePublished\":\"2024-03-15T23:19:13+00:00\",\"dateModified\":\"2024-03-21T22:30:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\"},\"wordCount\":162,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\",\"name\":\"How to set the default value of a dropdown list in layui? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T23:19:13+00:00\",\"dateModified\":\"2024-03-21T22:30:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set the default value of a dropdown list in layui?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\",\"name\":\"Isabella Edwards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"caption\":\"Isabella Edwards\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to set the default value of a dropdown list in layui? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/","og_locale":"en_US","og_type":"article","og_title":"How to set the default value of a dropdown list in layui?","og_description":"There are two methods to set the default value for a dropdown box using Layui. Option: Method 1: Setting the value attribute in HTML. &lt;select name=\"city\" lay-verify=\"required\"&gt; &lt;option value=\"\"&gt;\u8bf7\u9009\u62e9\u57ce\u5e02&lt;\/option&gt; &lt;option value=\"1\" {{ data.city === '1' ? 'selected' : '' }}&gt;\u5317\u4eac&lt;\/option&gt; &lt;option value=\"2\" {{ data.city === '2' ? 'selected' : '' }}&gt;\u4e0a\u6d77&lt;\/option&gt; &lt;option value=\"3\" {{ data.city [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T23:19:13+00:00","article_modified_time":"2024-03-21T22:30:36+00:00","author":"Isabella Edwards","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Isabella Edwards","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/"},"author":{"name":"Isabella Edwards","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd"},"headline":"How to set the default value of a dropdown list in layui?","datePublished":"2024-03-15T23:19:13+00:00","dateModified":"2024-03-21T22:30:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/"},"wordCount":162,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/","name":"How to set the default value of a dropdown list in layui? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T23:19:13+00:00","dateModified":"2024-03-21T22:30:36+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-default-value-of-a-dropdown-list-in-layui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set the default value of a dropdown list in layui?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd","name":"Isabella Edwards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","caption":"Isabella Edwards"},"url":"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=22283"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22283\/revisions"}],"predecessor-version":[{"id":56196,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22283\/revisions\/56196"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=22283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=22283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=22283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}