{"id":10010,"date":"2024-01-10T18:13:00","date_gmt":"2024-01-10T18:13:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10010"},"modified":"2024-01-22T16:14:22","modified_gmt":"2024-01-22T11:14:22","slug":"custom-select-dropdown-using-ul-li-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/","title":{"rendered":"Custom Select Dropdown Using ul li in JavaScript"},"content":{"rendered":"

This code creates custom select dropdowns in a webpage. It uses ul and li elements styled with CSS to mimic dropdown functionality. The JavaScript manages the opening and closing of the dropdowns when clicked, allowing selection of items within them. This is helpful for creating custom-styled select dropdown<\/a> menus without relying on the default browser behavior.<\/p>\n

How to Create Custom Select Dropdown Using Ul Li In Javascript<\/h2>\n

1. Start by setting up the HTML structure for your custom dropdowns. Use unordered lists (ul<\/code>) and list items (li<\/code>) to create the dropdown options. For example:<\/p>\n

<div class=\"block-wrapper\">\r\n\t<ul class=\"select\">\r\n\t\t<li>\r\n\t\t\t<input class=\"select-field\" value=\"\" placeholder=\"Select an element\" readonly \/>\r\n\t\t\t<span><\/span>\r\n\t\t\t<ul class=\"select-list\">\r\n\t\t\t\t<li>Item I<\/li>\r\n\t\t\t\t<li>Item II<\/li>\r\n\t\t\t\t<li>Item III<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/li>\r\n\t<\/ul>\r\n\r\n\t<ul class=\"select\">\r\n\t\t<li>\r\n\t\t\t<input class=\"select-field\" value=\"\" placeholder=\"Select an element\" readonly \/>\r\n\t\t\t<span><\/span>\r\n\t\t\t<ul class=\"select-list\">\r\n\t\t\t\t<li>Item A<\/li>\r\n\t\t\t\t<li>Item B<\/li>\r\n\t\t\t\t<li>Item C<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\n
Modify the dropdown options by updating the content within the <ul class=\"select-list\"><\/code> for each select element. Customize the items to fit the specific choices you want to offer.<\/p>\n
2. Style the dropdown elements using the following CSS code. Customize the CSS properties as per your design preferences.<\/p>\n
@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500&display=swap\");\r\n:root {\r\n  --font: \"Montserrat\", sans-serif;\r\n  --fontWeightLight: 300;\r\n  --fontWeightRegular: 400;\r\n  --fontWeightMedium: 500;\r\n  --textColor: #000;\r\n  --textColorLight: #444;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbody {\r\n  padding: 20px;\r\n  font-family: var(--font);\r\n  font-weight: var(--fontWeightRegular);\r\n  color: var(--textColor);\r\n}\r\n\r\nul {\r\n  list-style: none;\r\n}\r\n\r\n.block-wrapper {\r\n  display: flex;\r\n  gap: 30px;\r\n  padding: 20px 0 40px;\r\n}\r\n\r\n.select {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 350px;\r\n  background: #fff;\r\n}\r\n.select-field {\r\n  padding: 12px 32px 12px 12px;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  font-weight: var(--fontWeightMedium);\r\n  font-size: 1em;\r\n  color: #444;\r\n  background-color: unset;\r\n  border: 2px solid #7e9bbd;\r\n  border-radius: 4px;\r\n  transition: 0.2s;\r\n  z-index: 1;\r\n  cursor: pointer;\r\n}\r\n.select-field:focus {\r\n  outline: transparent;\r\n  box-shadow: 0 0 3px #7e9bbd;\r\n}\r\n.select-field::placeholder {\r\n  font-weight: var(--fontWeightLight);\r\n  color: #444;\r\n}\r\n.select-field + span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 32px;\r\n}\r\n.select-field + span::after {\r\n  content: \"\";\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  border-width: 8px 8px 0 8px;\r\n  border-color: #008095 transparent transparent transparent;\r\n  pointer-events: none;\r\n  transition: 0.5s;\r\n  z-index: 1;\r\n}\r\n.select-field.turn + span::after {\r\n  border-width: 0 8px 8px 8px;\r\n  border-color: transparent transparent #008095 transparent;\r\n}\r\n.select-list {\r\n  display: none;\r\n  position: absolute;\r\n  top: 45px;\r\n  left: 0;\r\n  width: 100%;\r\n  background-color: #fff;\r\n  border: 2px solid #7e9bbd;\r\n  animation: fadeIn 0.4s;\r\n  z-index: 10;\r\n}\r\n.select-list.open {\r\n  display: block;\r\n}\r\n.select-list li {\r\n  display: block;\r\n  color: var(--textColor);\r\n  font-weight: var(--textWeightLight);\r\n  padding: 12px 12px 12px 12px;\r\n  transition: all 0.2s ease-out;\r\n  cursor: pointer;\r\n}\r\n.select-list li:not(:last-child) {\r\n  border-bottom: 1px solid #7e9bbd;\r\n}\r\n.select-list li:hover {\r\n  background-color: #008095;\r\n  color: #fff;\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}<\/pre>\n
3. Finally, add the JavaScript code to enable the dropdown functionality. The SelectManager<\/code> class manages the opening and closing of the dropdowns when clicked, allowing the selection of items within them.<\/p>\n
class SelectManager {\r\n\tconstructor(containerSelector, selectSelector) {\r\n\t\tthis.container = document.querySelector(containerSelector);\r\n\t\tthis.selectSelector = selectSelector;\r\n\t\tthis.init();\r\n\t}\r\n\r\n\tinit() {\r\n\t\tthis.container.addEventListener(\"click\", (e) => {\r\n\t\t\tconst targetSelect = e.target.closest(this.selectSelector);\r\n\t\t\tif (targetSelect) {\r\n\t\t\t\tthis.handleSelectClick(targetSelect);\r\n\t\t\t} else {\r\n\t\t\t\tthis.closeAllSelects();\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tdocument.addEventListener(\"click\", (e) => {\r\n\t\t\tif (\r\n\t\t\t\t!e.target.closest(this.selectSelector) &&\r\n\t\t\t\t!e.target.closest(\".select-list\")\r\n\t\t\t) {\r\n\t\t\t\tthis.closeAllSelects();\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\thandleSelectClick(select) {\r\n\t\tconst field = select.querySelector(\".select-field\");\r\n\t\tconst list = select.querySelector(\".select-list\");\r\n\r\n\t\tthis.closeOtherSelects(field);\r\n\r\n\t\tlist.classList.toggle(\"open\");\r\n\t\tfield.classList.toggle(\"turn\");\r\n\r\n\t\tlist.addEventListener(\"click\", (e) => {\r\n\t\t\te.stopPropagation();\r\n\t\t});\r\n\r\n\t\tconst selectItemClickHandler = (e) => {\r\n\t\t\tconst selectedItem = e.target.closest(\"li\");\r\n\t\t\tif (selectedItem) {\r\n\t\t\t\tconst result = selectedItem.textContent.trim();\r\n\t\t\t\tfield.value = result;\r\n\t\t\t\tlist.classList.remove(\"open\");\r\n\t\t\t\tfield.classList.remove(\"turn\");\r\n\t\t\t\tlist.removeEventListener(\"click\", selectItemClickHandler);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tlist.addEventListener(\"click\", selectItemClickHandler);\r\n\t}\r\n\r\n\tcloseOtherSelects(clickedField) {\r\n\t\tvar selects = this.container.querySelectorAll(this.selectSelector);\r\n\t\tfor (var i = 0; i < selects.length; i++) {\r\n\t\t\tvar select = selects[i];\r\n\t\t\tvar field = select.querySelector(\".select-field\");\r\n\t\t\tvar list = select.querySelector(\".select-list\");\r\n\r\n\t\t\tif (field && list && field !== clickedField) {\r\n\t\t\t\tif (list.classList.contains(\"open\")) {\r\n\t\t\t\t\tlist.classList.remove(\"open\");\r\n\t\t\t\t}\r\n\t\t\t\tif (field.classList.contains(\"turn\")) {\r\n\t\t\t\t\tfield.classList.remove(\"turn\");\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tcloseAllSelects() {\r\n\t\tlet selects = this.container.querySelectorAll(this.selectSelector);\r\n\t\tfor (let i = 0; i < selects.length; i++) {\r\n\t\t\tlet select = selects[i];\r\n\t\t\tconst field = select.querySelector(\".select-field\");\r\n\t\t\tconst list = select.querySelector(\".select-list\");\r\n\r\n\t\t\tif (list && field) {\r\n\t\t\t\tlist.classList.remove(\"open\");\r\n\t\t\t\tfield.classList.remove(\"turn\");\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\/\/ Init\r\nconst selectManager = new SelectManager(\"body\", \".select\");<\/pre>\n
That’s all! hopefully, you have successfully created a custom select dropdown using ul li elements in JavaScript. This solution provides a visually appealing alternative to the default browser select dropdowns. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates custom select dropdowns in a webpage. It uses ul and li elements styled with CSS to mimic…<\/p>\n","protected":false},"author":1,"featured_media":10033,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[219],"class_list":["post-10010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input","tag-select-dropdown"],"acf":[],"yoast_head":"\nCustom Select Dropdown Using ul li in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Select Dropdown Using ul li in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T18:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:14:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\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:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Custom Select Dropdown Using ul li in JavaScript\",\"datePublished\":\"2024-01-10T18:13:00+00:00\",\"dateModified\":\"2024-01-22T11:14:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\"},\"wordCount\":215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png\",\"keywords\":[\"Select Dropdown\"],\"articleSection\":[\"Text & Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\",\"name\":\"Custom Select Dropdown Using ul li in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png\",\"datePublished\":\"2024-01-10T18:13:00+00:00\",\"dateModified\":\"2024-01-22T11:14:22+00:00\",\"description\":\"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Custom Select Dropdown Using ul li in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text & Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Custom Select Dropdown Using ul li in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Select Dropdown Using ul li in JavaScript — CodeHim","description":"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Custom Select Dropdown Using ul li in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:13:00+00:00","article_modified_time":"2024-01-22T11:14:22+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Custom Select Dropdown Using ul li in JavaScript","datePublished":"2024-01-10T18:13:00+00:00","dateModified":"2024-01-22T11:14:22+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/"},"wordCount":215,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png","keywords":["Select Dropdown"],"articleSection":["Text & Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/","url":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/","name":"Custom Select Dropdown Using ul li in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png","datePublished":"2024-01-10T18:13:00+00:00","dateModified":"2024-01-22T11:14:22+00:00","description":"Here is a free code snippet to create a Custom Select Dropdown Using ul li in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Custom-Select-Dropdown-Using-ul-li-in-JavaScript.png","width":1280,"height":960,"caption":"Custom Select Dropdown Using ul li in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/custom-select-dropdown-using-ul-li-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text & Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Custom Select Dropdown Using ul li in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3063,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10010"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10010\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10033"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}