{"id":42896,"date":"2018-01-03T21:01:41","date_gmt":"2018-01-03T13:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42896"},"modified":"2023-04-06T19:15:42","modified_gmt":"2023-04-06T11:15:42","slug":"multijs-select-menu-plugin","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/","title":{"rendered":"Multi.js: Easy-to-Use Select Box with Plain JavaScript"},"content":{"rendered":"<p><strong>Select menus<\/strong> are primitive but they work. Same goes for all the typical form inputs such as <strong>checkboxes<\/strong> and <strong>radio buttons<\/strong>.<\/p>\n<p>It\u2019s easy to create <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/\">your own forms<\/a> but <strong>rebuilding interface elements from scratch<\/strong> can be tough. That\u2019s why <strong><a href=\"https:\/\/github.com\/Fabianlindfors\/multi.js\" target=\"_blank\" rel=\"noopener\">Multi.js<\/a><\/strong> is such a valuable plugin for <strong>replacing default select boxes<\/strong>.<\/p>\n<p>With Multi.js, you <strong>give visitors a list of items to pick from<\/strong> with a multi-select feature built into the form. This way users can <strong>click multiple items<\/strong> without relying on checkboxes.<\/p>\n<figure><a href=\"https:\/\/github.com\/Fabianlindfors\/multi.js\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg\" alt=\"Multi.js select plugin\" width=\"515\" height=\"366\"><\/a><\/figure>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-form-builders\/\" rel=\"noopener\">5 Free Online HTML Form Builders<\/a><\/p>\n<p>This script even <strong>supports a search feature<\/strong>, so users can search for items if the list is especially long.<\/p>\n<p>I also find the menu pretty intuitive, so it <strong>doesn\u2019t need much explaining<\/strong>. You click any item on the left-hand side to add it to the right column (or \u201cselected\u201d items). Then, click on items in the right column to remove them.<\/p>\n<p><strong>Everything runs on vanilla JavaScript<\/strong>, including the search feature, so you don\u2019t need any dependencies. Although, it <strong>does support jQuery<\/strong> if your site uses that library.<\/p>\n<p>All you need is the Multi.js file and the CSS stylesheet to go along with it. Next, you just <strong>create a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/select\" target=\"_blank\" rel=\"noopener\"><code>&lt;select&gt;<\/code> element<\/a><\/strong> and <strong>target the element with a JavaScript function<\/strong>, like so:<\/p>\n<pre>\r\nvar select_element = document.getElementById( 'your_element_ID' );\r\nmulti( select_element );\r\n<\/pre>\n<p>Right now, the plugin <strong>does not support optgroups<\/strong> but this feature is in the works.<\/p>\n<p>Either way, the default functionality is stunning. It works just as you\u2019d expect and it <strong>even supports mobile responsive layouts<\/strong>.<\/p>\n<p>To learn more, check out the <strong><a href=\"https:\/\/github.com\/Fabianlindfors\/multi.js\" target=\"_blank\" rel=\"noopener\">GitHub repo<\/a><\/strong> which <strong>also includes downloadable files<\/strong>. The Multi.js <strong><a href=\"https:\/\/fabianlindfors.se\/multijs\/\" target=\"_blank\" rel=\"noopener\">demo page<\/a><\/strong> is great for seeing how this plugin <strong>works in the browser<\/strong>. But really, it\u2019s just a simple way to <strong>restyle your select menus<\/strong> while improving your form\u2019s <a href=\"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/\">overall user experience<\/a>.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/style-select-with-easydropdown-js\/\" rel=\"noopener\">Create Beautiful &lt;SELECT&gt; Dropdown With EasyDropDown.js<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It\u2019s easy to create your own forms but rebuilding interface elements from scratch can be tough. That\u2019s why Multi.js is such a valuable plugin for replacing default select boxes. With Multi.js, you give visitors&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Multi.js: Easy-to-Use Select Box with Plain JavaScript - Hongkiat<\/title>\n<meta name=\"description\" content=\"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It&#039;s easy to create your own\" \/>\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.hongkiat.com\/blog\/multijs-select-menu-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi.js: Easy-to-Use Select Box with Plain JavaScript\" \/>\n<meta property=\"og:description\" content=\"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It&#039;s easy to create your own\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-03T13:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Multi.js: Easy-to-Use Select Box with Plain JavaScript\",\"datePublished\":\"2018-01-03T13:01:41+00:00\",\"dateModified\":\"2023-04-06T11:15:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/\"},\"wordCount\":312,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multijs-select-menu-plugin\\\/01-multijs-select-menu.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/\",\"name\":\"Multi.js: Easy-to-Use Select Box with Plain JavaScript - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multijs-select-menu-plugin\\\/01-multijs-select-menu.jpg\",\"datePublished\":\"2018-01-03T13:01:41+00:00\",\"dateModified\":\"2023-04-06T11:15:42+00:00\",\"description\":\"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It's easy to create your own\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multijs-select-menu-plugin\\\/01-multijs-select-menu.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multijs-select-menu-plugin\\\/01-multijs-select-menu.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/multijs-select-menu-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multi.js: Easy-to-Use Select Box with Plain JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Multi.js: Easy-to-Use Select Box with Plain JavaScript - Hongkiat","description":"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It's easy to create your own","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.hongkiat.com\/blog\/multijs-select-menu-plugin\/","og_locale":"en_US","og_type":"article","og_title":"Multi.js: Easy-to-Use Select Box with Plain JavaScript","og_description":"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It's easy to create your own","og_url":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-01-03T13:01:41+00:00","article_modified_time":"2023-04-06T11:15:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Multi.js: Easy-to-Use Select Box with Plain JavaScript","datePublished":"2018-01-03T13:01:41+00:00","dateModified":"2023-04-06T11:15:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/"},"wordCount":312,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg","keywords":["Javascripts"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/","url":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/","name":"Multi.js: Easy-to-Use Select Box with Plain JavaScript - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg","datePublished":"2018-01-03T13:01:41+00:00","dateModified":"2023-04-06T11:15:42+00:00","description":"Select menus are primitive but they work. Same goes for all the typical form inputs such as checkboxes and radio buttons. It's easy to create your own","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/multijs-select-menu-plugin\/01-multijs-select-menu.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/multijs-select-menu-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Multi.js: Easy-to-Use Select Box with Plain JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-b9S","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=42896"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42896\/revisions"}],"predecessor-version":[{"id":65889,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42896\/revisions\/65889"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42896"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}