{"id":86813,"date":"2025-05-10T21:25:17","date_gmt":"2025-05-10T14:25:17","guid":{"rendered":"https:\/\/itviec1.uptech.vn\/?p=86813"},"modified":"2025-05-10T21:25:17","modified_gmt":"2025-05-10T14:25:17","slug":"the-select-html-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/","title":{"rendered":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Gioi_thieu_ve_the_select_HTML\" >Gi\u1edbi thi\u1ec7u v\u1ec1 th\u1ebb select HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Cac_thuoc_tinh_pho_bien_cua_the_select_HTML\" >C\u00e1c thu\u1ed9c t\u00ednh ph\u1ed5 bi\u1ebfn c\u1ee7a th\u1ebb select HTML \u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Huong_dan_tuy_chinh_custom_menu_the_select_HTML\" >H\u01b0\u1edbng d\u1eabn t\u00f9y ch\u1ec9nh (custom) menu th\u1ebb select HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Lam_the_nao_de_tuy_chinh_hop_chon_select_box\" >L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u00f9y ch\u1ec9nh h\u1ed9p ch\u1ecdn (select box)?\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Cau_hoi_thuong_gap_ve_the_select_HTML\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 th\u1ebb select HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong><em>Select HTML l\u00e0 th\u1ebb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c danh s\u00e1ch l\u1ef1a ch\u1ecdn d\u1ea1ng th\u1ea3 xu\u1ed1ng (dropdown list) trong bi\u1ec3u m\u1eabu (form) tr\u00ean website. Nh\u1edd v\u00e0o t\u00ednh \u0111\u01a1n gi\u1ea3n, d\u1ec5 thao t\u00e1c v\u00e0 kh\u1ea3 n\u0103ng \u1ee9ng d\u1ee5ng cao, th\u1ebb &lt;select&gt; th\u01b0\u1eddng xuy\u00ean \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c form \u0111\u0103ng k\u00fd, form li\u00ean h\u1ec7 hay b\u1ea5t k\u1ef3 tr\u01b0\u1eddng h\u1ee3p n\u00e0o y\u00eau c\u1ea7u l\u1ef1a ch\u1ecdn t\u1eeb danh s\u00e1ch (list). B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n s\u1eed d\u1ee5ng th\u1ebb select hi\u1ec7u qu\u1ea3 \u0111\u1ec3 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tr\u00ean trang web.\u00a0<\/em><\/strong><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u1ed5ng quan v\u1ec1 th\u1ebb select trong HTML, bao g\u1ed3m \u0111\u1ecbnh ngh\u0129a, c\u00fa ph\u00e1p, ti\u1ec7n \u00edch, tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 v\u00e0 v\u00ed d\u1ee5.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb &lt;select&gt; th\u01b0\u1eddng g\u1eb7p.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn c\u00e1ch \u0111\u1ecbnh d\u1ea1ng (custom) menu th\u1ebb select trong HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng checkbox c\u1ee7a th\u1ebb select.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 th\u1ebb select.\u00a0<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_the_select_HTML\"><\/span><b>Gi\u1edbi thi\u1ec7u v\u1ec1 th\u1ebb select HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Th\u1ebb HTML &lt;select&gt; \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o danh s\u00e1ch th\u1ea3 xu\u1ed1ng (dropdown) v\u00e0 th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong bi\u1ec3u m\u1eabu (form) \u0111\u1ec3 thu th\u1eadp d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. Ngo\u00e0i ra, th\u1ebb &lt;select&gt; \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t nh\u01b0 Google Chrome, Microsoft Edge, Opera, Firefox hay Safari.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:\u00a0<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;select&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;option&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">{n\u1ed9i dung t\u00f9y ch\u1ecdn}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/option&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0...<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/select&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3,\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00e1c th\u1ebb &lt;option&gt; b\u00ean trong &lt;select&gt;: <\/b><span style=\"font-weight: 400;\">Gi\u00fap hi\u1ec3n th\u1ecb c\u00e1c l\u1ef1a ch\u1ecdn c\u00f3 s\u1eb5n, cung c\u1ea5p ch\u1ee9c n\u0103ng \u0111\u1ec3 ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn t\u1eeb danh s\u00e1ch.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thu\u1ed9c t\u00ednh name<\/b><span style=\"font-weight: 400;\">: \u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 tham chi\u1ebfu d\u1eef li\u1ec7u bi\u1ec3u m\u1eabu sau khi \u0111\u01b0\u1ee3c g\u1eedi, n\u1ebfu b\u1ea1n b\u1ecf qua thu\u1ed9c t\u00ednh name th\u00ec s\u1ebd kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u n\u00e0o t\u1eeb dropdown \u0111\u01b0\u1ee3c g\u1eedi.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thu\u1ed9c t\u00ednh id: <\/b><span style=\"font-weight: 400;\">Gi\u00fap li\u00ean k\u1ebft danh s\u00e1ch th\u1ea3 xu\u1ed1ng v\u1edbi label.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 select, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o qua v\u00ed d\u1ee5 c\u01a1 b\u1ea3n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h1&gt;Th\u1ebb select HTML&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Th\u1ebb select \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o danh s\u00e1ch drop-down&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;form action=\"\/action_page.php\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;label for=\"cars\"&gt;L\u1ef1a ch\u1ecdn m\u1ed9t lo\u1ea1i xe:&lt;\/label&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;select name=\"cars\" id=\"cars\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"mescedes\"&gt;Mescedes&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"lexus\"&gt;Lexus&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"bmw\"&gt;BMW&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;br&gt;&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;input type=\"submit\" value=\"Submit\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Nh\u1ea5p v\u00e0o n\u00fat \"Submit\" v\u00e0 d\u1eef li\u1ec7u bi\u1ec3u m\u1eabu s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111\u1ebfn m\u1ed9t trang tr\u00ean<\/span>\r\n<span style=\"font-weight: 400;\">m\u00e1y ch\u1ee7 c\u00f3 t\u00ean l\u00e0 \"action_page.php\".&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86847\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-1-vippro.jpg\" alt=\"select html - itviec blog\" width=\"877\" height=\"378\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-1-vippro.jpg 877w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-1-vippro-300x129.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-1-vippro-768x331.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-1-vippro-200x86.jpg 200w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, l\u00e0 m\u1ed9t form \u0111\u01a1n gi\u1ea3n v\u1edbi th\u1ebb &lt;select&gt; d\u00f9ng \u0111\u1ec3 t\u1ea1o danh s\u00e1ch drop-down cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t lo\u1ea1i xe. Khi ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn xe v\u00e0 nh\u1ea5n n\u00fat Submit, d\u1eef li\u1ec7u s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111\u1ebfn trang \/action_page.php tr\u00ean m\u00e1y ch\u1ee7 (\u0111\u00e2y l\u00e0 URL gi\u1ea3 \u0111\u1ecbnh, b\u1ea1n c\u1ea7n c\u00f3 file x\u1eed l\u00fd ph\u00eda server \u1edf \u0111\u00f3).<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_thuoc_tinh_pho_bien_cua_the_select_HTML\"><\/span><b>C\u00e1c thu\u1ed9c t\u00ednh ph\u1ed5 bi\u1ebfn c\u1ee7a th\u1ebb select HTML \u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng th\u1ebb &lt;select&gt; hi\u1ec7u qu\u1ea3, b\u1ea1n n\u00ean hi\u1ec3u r\u00f5 c\u00e1c thu\u1ed9c t\u00ednh ph\u1ed5 bi\u1ebfn c\u1ee7a th\u1ebb. \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap t\u00f9y ch\u1ec9nh h\u00e0nh vi v\u00e0 giao di\u1ec7n c\u1ee7a dropdown hi\u1ec7u qu\u1ea3 h\u01a1n. B\u00ean c\u1ea1nh \u0111\u00f3, th\u1ebb &lt;select&gt; c\u0169ng c\u00f3 h\u1ed7 tr\u1ee3 c\u00e1c thu\u1ed9c t\u00ednh to\u00e0n c\u1ee5c (global attributes) v\u00e0 thu\u1ed9c t\u00ednh s\u1ef1 ki\u1ec7n (event attribute).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng thu\u1ed9c t\u00ednh th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng nh\u1ea5t khi l\u00e0m vi\u1ec7c v\u1edbi th\u1ebb &lt;select&gt;.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Thu\u1ed9c t\u00ednh<\/b><\/td>\n<td><b>Gi\u00e1 tr\u1ecb (value)<\/b><\/td>\n<td><b>Chi ti\u1ebft<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">autofocus<\/span><\/td>\n<td><span style=\"font-weight: 400;\">autofocus<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u1ef1 \u0111\u1ed9ng t\u1eadp trung v\u00e0o menu th\u1ea3 xu\u1ed1ng (dropdown) khi t\u1ea3i trang.\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">disabled<\/span><\/td>\n<td><span style=\"font-weight: 400;\">disabled<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u1eaft menu th\u1ea3 xu\u1ed1ng, d\u1eabn \u0111\u1ebfn kh\u00f4ng th\u1ec3 nh\u1ea5n ho\u1eb7c s\u1eed d\u1ee5ng menu.\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">form<\/span><\/td>\n<td><span style=\"font-weight: 400;\">form_id<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ch\u1ec9 \u0111\u1ecbnh ID c\u1ee7a bi\u1ec3u m\u1eabu m\u00e0 ph\u1ea7n t\u1eed &lt;select&gt; s\u1ebd li\u00ean k\u1ebft t\u1edbi, k\u1ec3 c\u1ea3 n\u1ebfu &lt;select&gt; kh\u00f4ng n\u1eb1m b\u00ean trong bi\u1ec3u m\u1eabu \u0111\u00f3.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">multiple<\/span><\/td>\n<td><span style=\"font-weight: 400;\">multiple<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Cho ph\u00e9p ch\u1ecdn nhi\u1ec1u gi\u00e1 tr\u1ecb t\u1eeb menu.\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">name<\/span><\/td>\n<td><span style=\"font-weight: 400;\">name<\/span><\/td>\n<td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh t\u00ean cho menu th\u1ea3 xu\u1ed1ng, d\u00f9ng \u0111\u1ec3 tham chi\u1ebfu d\u1eef li\u1ec7u bi\u1ec3u m\u1eabu ho\u1eb7c trong JavaScript.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">required<\/span><\/td>\n<td><span style=\"font-weight: 400;\">required<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t gi\u00e1 tr\u1ecb tr\u01b0\u1edbc khi g\u1eedi bi\u1ec3u m\u1eabu.\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">size<\/span><\/td>\n<td><span style=\"font-weight: 400;\">number<\/span><\/td>\n<td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh s\u1ed1 t\u00f9y ch\u1ecdn hi\u1ec3n th\u1ecb trong danh s\u00e1ch th\u1ea3 xu\u1ed1ng.\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_tuy_chinh_custom_menu_the_select_HTML\"><\/span><b>H\u01b0\u1edbng d\u1eabn t\u00f9y ch\u1ec9nh (custom) menu th\u1ebb select HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p, th\u1ebb &lt;select&gt; m\u1eb7c \u0111\u1ecbnh trong HTML c\u00f3 giao di\u1ec7n kh\u00e1 \u0111\u01a1n gi\u1ea3n v\u00e0 thi\u1ebfu linh ho\u1ea1t trong thi\u1ebft k\u1ebf. \u0110\u1ec3 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u0169ng nh\u01b0 \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n v\u1edbi t\u1ed5ng th\u1ec3 website, vi\u1ec7c tu\u1ef3 ch\u1ec9nh menu ch\u1ecdn l\u00e0 \u0111i\u1ec1u c\u1ea7n thi\u1ebft.\u00a0<\/span><\/p>\n<h3><b>\u0110\u1ecbnh d\u1ea1ng menu drop-down v\u1edbi <\/b><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><b>CSS<\/b><\/a><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 t\u1ea1o form HTML c\u00f3 s\u1eed d\u1ee5ng th\u1ebb &lt;select&gt; \u0111\u1ec3 t\u1ea1o m\u1ed9t menu ch\u1ecdn c\u00e1c h\u00e3ng xe. Ngo\u00e0i ra, ph\u1ea7n CSS gi\u00fap \u0111\u1ecbnh d\u1ea1ng l\u1ea1i giao di\u1ec7n cho label v\u00e0 select box.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">\r\nlabel {<\/span>\r\n<span style=\"font-weight: 400;\">font-family: Arial, sans-serif;<\/span>\r\n<span style=\"font-weight: 400;\">font-size: 14px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">select {<\/span>\r\n<span style=\"font-weight: 400;\">width: 150px;<\/span>\r\n<span style=\"font-weight: 400;\">padding: 5px;<\/span>\r\n<span style=\"font-weight: 400;\">border: 1px solid #ccc;<\/span>\r\n<span style=\"font-weight: 400;\">border-radius: 4px;<\/span>\r\n<span style=\"font-weight: 400;\">font-family: Arial, sans-serif;<\/span>\r\n<span style=\"font-weight: 400;\">font-size: 14px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;form&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;label for=\"cars\"&gt;Select a car brand:&lt;\/label&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;select id=\"cars\" name=\"cars\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"mescedes\"&gt;Mescedes&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"lexus\"&gt;Lexus&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"bmw\"&gt;BMW&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86846\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-2-vippro.jpg\" alt=\"select html - itviec blog\" width=\"676\" height=\"249\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-2-vippro.jpg 676w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-2-vippro-300x111.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-2-vippro-640x236.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-2-vippro-200x74.jpg 200w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n m\u00e3 tr\u00ean minh ho\u1ea1 m\u1ed9t menu ch\u1ecdn (dropdown menu) c\u01a1 b\u1ea3n v\u00e0 d\u1ec5 hi\u1ec3u, \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng nh\u1eb9 nh\u00e0ng b\u1eb1ng CSS, ph\u00f9 h\u1ee3p d\u00f9ng trong c\u00e1c form \u0111\u0103ng k\u00fd, kh\u1ea3o s\u00e1t,&#8230;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gi\u1ea3i th\u00edch:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;style&gt;:<\/b><span style=\"font-weight: 400;\"> \u0110\u1ecbnh d\u1ea1ng t\u1ea5t c\u1ea3 th\u1ebb &lt;label&gt;, font ch\u1eef: Arial, sans-serif. C\u1ee1 ch\u1eef: 14px, d\u1ec5 nh\u00ecn tr\u00ean c\u00e1c thi\u1ebft b\u1ecb ph\u1ed5 th\u00f4ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u0110\u1ecbnh d\u1ea1ng cho th\u1ebb &lt;select&gt;: <\/b><span style=\"font-weight: 400;\">Chi\u1ec1u r\u1ed9ng l\u00e0 150px. Padding 5px (t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n). Vi\u1ec1n 1px, m\u00e0u x\u00e1m nh\u1ea1t (#ccc). Bo g\u00f3c 4px \u2013 t\u1ea1o c\u1ea3m gi\u00e1c m\u1ec1m m\u1ea1i, hi\u1ec7n \u0111\u1ea1i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;label for=&#8221;cars&#8221;&gt;:<\/b><span style=\"font-weight: 400;\"> li\u00ean k\u1ebft label v\u1edbi &lt;select&gt; c\u00f3 id=&#8221;cars&#8221;, gi\u00fap t\u0103ng kh\u1ea3 n\u0103ng truy c\u1eadp v\u00e0 UX.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;select id=&#8221;cars&#8221; name=&#8221;cars&#8221;&gt;: <\/b><span style=\"font-weight: 400;\">T\u1ea1o m\u1ed9t dropdown menu. Thu\u1ed9c t\u00ednh name=&#8221;cars&#8221; gi\u00fap g\u1eedi gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ecdn khi submit form.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;option&gt;:<\/b><span style=\"font-weight: 400;\"> L\u00e0 c\u00e1c l\u1ef1a ch\u1ecdn trong menu. Value l\u00e0 gi\u00e1 tr\u1ecb s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi trong form (v\u00ed d\u1ee5: &#8220;audi&#8221;). N\u1ed9i dung gi\u1eefa th\u1ebb l\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng.<\/span><\/li>\n<\/ul>\n<h3><b>Menu Drop-down v\u1edbi Placeholder<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y s\u1ebd t\u1ea1o m\u1ed9t menu dropdown ch\u1ecdn tr\u00e1i c\u00e2y, trong \u0111\u00f3 c\u00f3 placeholder m\u1eb7c \u0111\u1ecbnh: \u201cSelect a fruit\u201d v\u00e0 ph\u1ea7n option b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a (disabled).<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;\r\n<\/span>\r\n<span style=\"font-weight: 400;\">select {<\/span>\r\n<span style=\"font-weight: 400;\">width: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">padding: 6px;<\/span>\r\n<span style=\"font-weight: 400;\">border: 1px solid #888;<\/span>\r\n<span style=\"font-weight: 400;\">border-radius: 5px;<\/span>\r\n<span style=\"font-weight: 400;\">background-color: #f9f9f9;<\/span>\r\n<span style=\"font-weight: 400;\">font-family: Verdana, sans-serif;<\/span>\r\n<span style=\"font-weight: 400;\">font-size: 13px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">option[disabled] {<\/span>\r\n<span style=\"font-weight: 400;\">color: #999;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;form&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;label for=\"fruits\"&gt;Choose a fruit:&lt;\/label&gt;\r\n<\/span>\r\n<span style=\"font-weight: 400;\">&lt;select id=\"fruits\" name=\"fruits\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"\" disabled selected&gt;Select a fruit&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"apple\"&gt;Apple&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"banana\"&gt;Banana&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"cherry\"&gt;Cherry&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/select&gt;\r\n<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/form&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86845\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-3-vippro.jpg\" alt=\"select html - itviec blog\" width=\"505\" height=\"247\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-3-vippro.jpg 505w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-3-vippro-300x147.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-3-vippro-200x98.jpg 200w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede \u0111o\u1ea1n m\u00e3 tr\u00ean, select s\u1ebd m\u1eb7c \u0111\u1ecbnh hi\u1ec3n th\u1ecb placeholder, nh\u01b0ng khi ch\u1ecdn m\u1ed9t option kh\u00e1c, placeholder s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c ch\u1ecdn l\u1ea1i. C\u1ee5 th\u1ec3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1eed d\u1ee5ng CSS \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng th\u1ebb &lt;select&gt;: <\/b><span style=\"font-weight: 400;\">V\u1edbi c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 width, padding, border, border-radius, background-color, font-family hay font-size.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;label for=&#8221;fruits&#8221;&gt;:<\/b><span style=\"font-weight: 400;\"> G\u1eafn nh\u00e3n &#8220;Choose a fruit&#8221; cho menu, c\u1ea3i thi\u1ec7n accessibility.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;select id=&#8221;fruits&#8221; name=&#8221;fruits&#8221;&gt;: <\/b><span style=\"font-weight: 400;\">Kh\u1edfi t\u1ea1o dropdown v\u1edbi ID v\u00e0 name \u0111\u1ec3 d\u00f9ng trong x\u1eed l\u00fd form.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>disabled:<\/b><span style=\"font-weight: 400;\"> kh\u00f4ng cho ch\u1ecdn (ch\u1ec9 hi\u1ec3n th\u1ecb g\u1ee3i \u00fd).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>selected:<\/b><span style=\"font-weight: 400;\"> M\u1eb7c \u0111\u1ecbnh \u0111\u01b0\u1ee3c ch\u1ecdn khi trang \u0111\u01b0\u1ee3c load xong<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Lam_the_nao_de_tuy_chinh_hop_chon_select_box\"><\/span><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u00f9y ch\u1ec9nh h\u1ed9p ch\u1ecdn (select box)?\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>T\u00f9y ch\u1ec9nh b\u1eb1ng c\u00e1ch t\u1ea1o m\u1edbi &lt;select&gt; t\u1eeb JavaScript<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">H\u1ed9p ch\u1ecdn (select box) trong HTML m\u1eb7c \u0111\u1ecbnh c\u00f3 giao di\u1ec7n kh\u00e1 \u0111\u01a1n gi\u1ea3n v\u00e0 h\u1ea1n ch\u1ebf trong vi\u1ec7c t\u00f9y ch\u1ec9nh ki\u1ec3u d\u00e1ng. Trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p, b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft k\u1ebf select box sao cho ph\u00f9 h\u1ee3p v\u1edbi giao di\u1ec7n t\u1ed5ng th\u1ec3 c\u1ee7a trang web ho\u1eb7c \u1ee9ng d\u1ee5ng b\u1eb1ng c\u00e1ch t\u1ea1o m\u1edbi &lt;select&gt; b\u1eb1ng JavaScript. Tuy nhi\u00ean, c\u00e1ch n\u00e0y c\u00f3 th\u1ec3 g\u00e2y ra c\u1ed3ng k\u1ec1nh trong source code v\u00e0 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u1eady l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u00f9y ch\u1ec9nh select box b\u1eb1ng JavaScript? \u0110\u1ea7u ti\u00ean, b\u1ea1n t\u1ea1o menu ch\u1ecdn t\u00f9y ch\u1ec9nh v\u1edbi m\u00e3 HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"custom-select\" style=\"width:200px;\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"0\"&gt;Select car:&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"1\"&gt;Audi&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"2\"&gt;BMW&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"3\"&gt;Lexus&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"4\"&gt;Ford&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"5\"&gt;Honda&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"6\"&gt;Jaguar&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"7\"&gt;Rolls-Royce&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"8\"&gt;Mercedes&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"9\"&gt;KIA&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"10\"&gt;Nissan&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"11\"&gt;Toyota&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"12\"&gt;Volvo&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede \u0111o\u1ea1n m\u00e3 tr\u00ean, \u0111\u00e3 t\u1ea1o m\u1ed9t dropdown (select box) cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t h\u00e3ng xe. Vi\u1ec7c \u0111\u1ec3 select b\u00ean trong th\u1ebb &lt;div class=&#8221;custom-select&#8221;&gt; g\u1ee3i \u00fd r\u1eb1ng c\u00f3 th\u1ec3 c\u00f3 CSS ho\u1eb7c JavaScript b\u00ean ngo\u00e0i \u0111\u1ec3 t\u00f9y ch\u1ec9nh giao di\u1ec7n ho\u1eb7c h\u00e0nh vi c\u1ee7a select box ( thay \u0111\u1ed5i ki\u1ec3u d\u00e1ng, th\u00eam icon, ho\u1eb7c t\u1ea1o dropdown t\u00f9y ch\u1ec9nh).<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>class=&#8221;custom-select&#8221;: <\/b><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 l\u1edbp CSS \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean \u0111\u1ec3 c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u d\u00e1ng t\u00f9y ch\u1ec9nh cho ph\u1ea7n t\u1eed ch\u1ee9a select box.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>style=&#8221;width:200px;&#8221;:<\/b><span style=\"font-weight: 400;\"> \u0110\u1eb7t chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh cho v\u00f9ng ch\u1ee9a l\u00e0 200 pixel. \u0110i\u1ec1u n\u00e0y gi\u00fap ki\u1ec3m so\u00e1t k\u00edch th\u01b0\u1edbc c\u1ee7a select box b\u00ean trong.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u1ebb &lt;select&gt;: <\/b><span style=\"font-weight: 400;\">Kh\u00f4ng c\u00f3 thu\u1ed9c t\u00ednh id hay name trong \u0111o\u1ea1n m\u00e3 n\u00e0y, n\u00ean n\u1ebfu d\u00f9ng trong form c\u1ea7n b\u1ed5 sung \u0111\u1ec3 g\u1eedi d\u1eef li\u1ec7u.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>M\u1ed7i &lt;option&gt;: <\/b><span style=\"font-weight: 400;\">\u0110\u1ea1i di\u1ec7n cho m\u1ed9t l\u1ef1a ch\u1ecdn trong dropdown. Gi\u00e1 tr\u1ecb value c\u1ee7a m\u1ed7i option l\u00e0 m\u1ed9t s\u1ed1 nguy\u00ean t\u1eeb 0 \u0111\u1ebfn 12, t\u01b0\u01a1ng \u1ee9ng v\u1edbi t\u1eebng h\u00e3ng xe.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ti\u1ebfp theo, b\u1ea1n vi\u1ebft th\u00eam m\u1ed9t \u0111o\u1ea1n m\u00e3 CSS \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng h\u1ed9p t\u00f9y ch\u1ecdn (select box).<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.custom-select {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: relative;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: Arial;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.custom-select select {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: none; \/*hide original SELECT element: *\/<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.select-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: DodgerBlue;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* Style the arrow inside the select element: *\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-selected:after {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0content: \"\";<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 14px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0right: 10px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 6px solid transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: #fff transparent transparent transparent;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* Point the arrow upwards when the select box is open (active): *\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-selected.select-arrow-active:after {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: transparent transparent #fff transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 7px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* style the items (options), including the selected item: *\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-items div,.select-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: #ffffff;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 8px 16px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 1px solid transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: pointer;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* Style items (options): *\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-items {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: DodgerBlue;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 100%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0left: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0right: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0z-index: 99;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* Hide the items when the select box is closed: *\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-hide {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: none;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.select-items div:hover, .same-as-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: rgba(0, 0, 0, 0.1);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n CSS n\u00e0y c\u00f3 c\u00f4ng d\u1ee5ng t\u1ea1o m\u1ed9t dropdown select box t\u00f9y ch\u1ec9nh, \u1ea9n \u0111i select g\u1ed1c v\u00e0 thay th\u1ebf b\u1eb1ng c\u00e1c ph\u1ea7n t\u1eed HTML kh\u00e1c (th\u01b0\u1eddng l\u00e0 div) v\u1edbi giao di\u1ec7n \u0111\u1eb9p h\u01a1n v\u00e0 d\u1ec5 t\u00f9y bi\u1ebfn.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.custom-select:<\/b><span style=\"font-weight: 400;\"> Thi\u1ebft l\u1eadp <\/span><span style=\"font-weight: 400;\">position: relative<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 l\u00e0m c\u01a1 s\u1edf \u0111\u1ecbnh v\u1ecb cho c\u00e1c ph\u1ea7n t\u1eed con c\u00f3 <\/span><span style=\"font-weight: 400;\">position: absolute<\/span><span style=\"font-weight: 400;\"> b\u00ean trong. \u0110\u1eb7t font ch\u1eef chung cho to\u00e0n b\u1ed9 v\u00f9ng ch\u1ee9a l\u00e0 Arial.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>display: none;<\/b><span style=\"font-weight: 400;\"> \u1ea8n th\u1ebb &lt;select&gt; g\u1ed1c \u0111i \u0111\u1ec3 kh\u00f4ng hi\u1ec3n th\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t. \u0110\u00e2y l\u00e0 b\u01b0\u1edbc c\u1ea7n thi\u1ebft khi t\u1ea1o select box t\u00f9y ch\u1ec9nh b\u1eb1ng HTML, CSS, ho\u1eb7c JavaScript thay th\u1ebf cho select m\u1eb7c \u0111\u1ecbnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-selected: <\/b><span style=\"font-weight: 400;\">\u0110\u00e2y th\u01b0\u1eddng l\u00e0 ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb gi\u00e1 tr\u1ecb \u0111\u00e3 ch\u1ecdn hi\u1ec7n t\u1ea1i c\u1ee7a dropdown. \u0110\u1eb7t n\u1ec1n m\u00e0u xanh DodgerBlue \u0111\u1ec3 n\u1ed5i b\u1eadt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-selected:after:<\/b><span style=\"font-weight: 400;\"> T\u1ea1o m\u0169i t\u00ean nh\u1ecf (arrow) b\u00ean ph\u1ea3i dropdown b\u1eb1ng c\u00e1ch d\u00f9ng border t\u1ea1o h\u00ecnh tam gi\u00e1c.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>position: absolute<\/b><span style=\"font-weight: 400;\"> \u0111\u1eb7t m\u0169i t\u00ean \u1edf g\u00f3c tr\u00ean b\u00ean ph\u1ea3i (top: 14px, right: 10px). M\u00e0u m\u0169i t\u00ean l\u00e0 tr\u1eafng (#fff) h\u01b0\u1edbng xu\u1ed1ng d\u01b0\u1edbi (tam gi\u00e1c ch\u1ec9 xu\u1ed1ng).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-selected.select-arrow-active:after: <\/b><span style=\"font-weight: 400;\">Khi dropdown m\u1edf (c\u00f3 class select-arrow-active), m\u0169i t\u00ean \u0111\u1ed5i h\u01b0\u1edbng l\u00ean tr\u00ean.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-items div, .select-selected:<\/b><span style=\"font-weight: 400;\"> \u00c1p d\u1ee5ng style chung cho c\u00e1c m\u1ee5c trong dropdown (.select-items div) v\u00e0 ph\u1ea7n hi\u1ec3n th\u1ecb gi\u00e1 tr\u1ecb \u0111\u00e3 ch\u1ecdn (.select-selected).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-items:<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 container ch\u1ee9a c\u00e1c l\u1ef1a ch\u1ecdn dropdown.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-hide:<\/b><span style=\"font-weight: 400;\"> Class d\u00f9ng \u0111\u1ec3 \u1ea9n dropdown khi kh\u00f4ng c\u1ea7n hi\u1ec3n th\u1ecb (display: none).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>.select-items div:hover, .same-as-selected:<\/b><span style=\"font-weight: 400;\"> Khi r\u00ea chu\u1ed9t v\u00e0o m\u1ed9t m\u1ee5c trong dropdown ho\u1eb7c m\u1ee5c \u0111\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c ch\u1ecdn (same-as-selected), n\u1ec1n \u0111\u1ed5i th\u00e0nh m\u00e0u \u0111en m\u1edd (rgba(0, 0, 0, 0.1)) t\u1ea1o hi\u1ec7u \u1ee9ng hover v\u00e0 highlight.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Cu\u1ed1i c\u00f9ng, b\u1ea1n th\u00eam m\u00e3 JavaScript \u0111\u1ec3 ho\u00e0n th\u00e0nh qu\u00e1 tr\u00ecnh \u0111\u1ecbnh d\u1ea1ng cho h\u1ed9p ch\u1ecdn.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">var x, i, j, l, ll, selElmnt, a, b, c;<\/span>\r\n<span style=\"font-weight: 400;\">\/* Look for any elements with the class \"custom-select\": *\/<\/span>\r\n<span style=\"font-weight: 400;\">x = document.getElementsByClassName(\"custom-select\");<\/span>\r\n<span style=\"font-weight: 400;\">l = x.length;<\/span>\r\n<span style=\"font-weight: 400;\">for (i = 0; i &lt; l; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selElmnt = x[i].getElementsByTagName(\"select\")[0];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0ll = selElmnt.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/* For each element, create a new DIV that will act as the selected item: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.setAttribute(\"class\", \"select-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x[i].appendChild(a);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/* For each element, create a new DIV that will contain the option list: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0b = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0b.setAttribute(\"class\", \"select-items select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (j = 1; j &lt; ll; j++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* For each option in the original select element,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0create a new DIV that will act as an option item: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c.innerHTML = selElmnt.options[j].innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c.addEventListener(\"click\", function(e) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* When an item is clicked, update the original select box,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and the selected item: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var y, i, k, s, h, sl, yl;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s = this.parentNode.parentNode.getElementsByTagName(\"select\")[0];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sl = s.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h = this.parentNode.previousSibling;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = 0; i &lt; sl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (s.options[i].innerHTML == this.innerHTML) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.selectedIndex = i;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h.innerHTML = this.innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0y = this.parentNode.getElementsByClassName(\"same-as-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0yl = y.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (k = 0; k &lt; yl; k++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0y[k].removeAttribute(\"class\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setAttribute(\"class\", \"same-as-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h.click();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0});<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0b.appendChild(c);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x[i].appendChild(b);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.addEventListener(\"click\", function(e) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* When the select box is clicked, close any other select boxes,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0and open\/close the current select box: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0e.stopPropagation();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0closeAllSelect(this);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.nextSibling.classList.toggle(\"select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0this.classList.toggle(\"select-arrow-active\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0});<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function closeAllSelect(elmnt) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/* A function that will close all select boxes in the document,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0except the current select box: *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0var x, y, i, xl, yl, arrNo = [];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x = document.getElementsByClassName(\"select-items\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0y = document.getElementsByClassName(\"select-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0xl = x.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0yl = y.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (i = 0; i &lt; yl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0if (elmnt == y[i]) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0arrNo.push(i)<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0} else {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0y[i].classList.remove(\"select-arrow-active\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (i = 0; i &lt; xl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0if (arrNo.indexOf(i)) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0x[i].classList.add(\"select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* If the user clicks anywhere outside the select box,<\/span>\r\n<span style=\"font-weight: 400;\">then close all select boxes: *\/<\/span>\r\n<span style=\"font-weight: 400;\">document.addEventListener(\"click\", closeAllSelect);<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>H\u00e0m closeAllSelect: <\/b><span style=\"font-weight: 400;\">\u0110\u00f3ng t\u1ea5t c\u1ea3 dropdown kh\u00e1c ngo\u00e0i dropdown hi\u1ec7n t\u1ea1i (elmnt). L\u1eb7p qua t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed select-selected v\u00e0 select-items.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u1ef1 ki\u1ec7n document click:<\/b><span style=\"font-weight: 400;\"> Khi ng\u01b0\u1eddi d\u00f9ng click b\u1ea5t k\u1ef3 v\u1ecb tr\u00ed n\u00e0o ngo\u00e0i dropdown, t\u1ea5t c\u1ea3 dropdown s\u1ebd \u0111\u00f3ng l\u1ea1i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>a.addEventListener:<\/b><span style=\"font-weight: 400;\"> Th\u00eam s\u1ef1 ki\u1ec7n click cho ph\u1ea7n hi\u1ec3n th\u1ecb l\u1ef1a ch\u1ecdn hi\u1ec7n t\u1ea1i. Khi click, d\u1eebng s\u1ef1 ki\u1ec7n lan truy\u1ec1n. G\u1ecdi h\u00e0m closeAllSelect(this) \u0111\u1ec3 \u0111\u00f3ng c\u00e1c dropdown kh\u00e1c. M\u1edf\/\u0111\u00f3ng dropdown hi\u1ec7n t\u1ea1i b\u1eb1ng c\u00e1ch toggle class select-hide. Toggle class select-arrow-active \u0111\u1ec3 thay \u0111\u1ed5i h\u01b0\u1edbng m\u0169i t\u00ean.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>b.appendChild: <\/b><span style=\"font-weight: 400;\">Th\u00eam t\u1ea5t c\u1ea3 c\u00e1c div option v\u00e0o div ch\u1ee9a danh s\u00e1ch. Th\u00eam div danh s\u00e1ch v\u00e0o ph\u1ea7n t\u1eed custom-select.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 \u0111o\u1ea1n m\u00e3 ho\u00e0n ch\u1ec9nh c\u00f9ng k\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">\/*the container must be positioned relative:*\/<\/span>\r\n<span style=\"font-weight: 400;\">.custom-select {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: relative;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: Arial;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.custom-select select {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: none; \/*hide original SELECT element:*\/<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.select-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: DodgerBlue;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/*style the arrow inside the select element:*\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-selected:after {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0content: \"\";<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 14px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0right: 10px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 6px solid transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: #fff transparent transparent transparent;<\/span>\r\n<span style=\"font-weight: 400;\">}\r\n<\/span>\r\n<span style=\"font-weight: 400;\">\/*point the arrow upwards when the select box is open (active):*\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-selected.select-arrow-active:after {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: transparent transparent #fff transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 7px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/*style the items (options), including the selected item:*\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-items div,.select-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: #ffffff;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 8px 16px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 1px solid transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: pointer;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0user-select: none;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/*style items (options):*\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-items {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: DodgerBlue;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 100%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0left: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0right: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0z-index: 99;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/*hide the items when the select box is closed:*\/<\/span>\r\n<span style=\"font-weight: 400;\">.select-hide {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: none;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.select-items div:hover, .same-as-selected {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: rgba(0, 0, 0, 0.1);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Custom Select&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;!--surround the select box with a \"custom-select\" DIV element. Remember to set the width:--&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;div class=\"custom-select\" style=\"width:200px;\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"0\"&gt;Select car:&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"1\"&gt;Audi&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"2\"&gt;BMW&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"3\"&gt;Lexus&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"4\"&gt;Ford&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"5\"&gt;Honda&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"6\"&gt;Jaguar&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"7\"&gt;Roll Royce&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"8\"&gt;Mercedes&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"9\"&gt;KIA&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"10\"&gt;Nissan&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"11\"&gt;Toyota&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"12\"&gt;Volvo&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n<span style=\"font-weight: 400;\">var x, i, j, l, ll, selElmnt, a, b, c;<\/span>\r\n<span style=\"font-weight: 400;\">\/*look for any elements with the class \"custom-select\":*\/<\/span>\r\n<span style=\"font-weight: 400;\">x = document.getElementsByClassName(\"custom-select\");<\/span>\r\n<span style=\"font-weight: 400;\">l = x.length;<\/span>\r\n<span style=\"font-weight: 400;\">for (i = 0; i &lt; l; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0selElmnt = x[i].getElementsByTagName(\"select\")[0];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0ll = selElmnt.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/*for each element, create a new DIV that will act as the selected item:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.setAttribute(\"class\", \"select-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x[i].appendChild(a);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/*for each element, create a new DIV that will contain the option list:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0b = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0b.setAttribute(\"class\", \"select-items select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (j = 1; j &lt; ll; j++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/*for each option in the original select element,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0create a new DIV that will act as an option item:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c = document.createElement(\"DIV\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c.innerHTML = selElmnt.options[j].innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0c.addEventListener(\"click\", function(e) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/*when an item is clicked, update the original select box,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0and the selected item:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var y, i, k, s, h, sl, yl;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s = this.parentNode.parentNode.getElementsByTagName(\"select\")[0];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sl = s.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h = this.parentNode.previousSibling;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = 0; i &lt; sl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (s.options[i].innerHTML == this.innerHTML) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.selectedIndex = i;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h.innerHTML = this.innerHTML;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0y = this.parentNode.getElementsByClassName(\"same-as-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0yl = y.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (k = 0; k &lt; yl; k++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0y[k].removeAttribute(\"class\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setAttribute(\"class\", \"same-as-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h.click();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0});<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0b.appendChild(c);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x[i].appendChild(b);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0a.addEventListener(\"click\", function(e) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\/*when the select box is clicked, close any other select boxes,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0and open\/close the current select box:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0e.stopPropagation();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0closeAllSelect(this);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.nextSibling.classList.toggle(\"select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0this.classList.toggle(\"select-arrow-active\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0});<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">function closeAllSelect(elmnt) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/*a function that will close all select boxes in the document,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0except the current select box:*\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0var x, y, i, xl, yl, arrNo = [];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0x = document.getElementsByClassName(\"select-items\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0y = document.getElementsByClassName(\"select-selected\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0xl = x.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0yl = y.length;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (i = 0; i &lt; yl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0if (elmnt == y[i]) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0arrNo.push(i)<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0} else {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0y[i].classList.remove(\"select-arrow-active\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0for (i = 0; i &lt; xl; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0if (arrNo.indexOf(i)) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0x[i].classList.add(\"select-hide\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">\/*if the user clicks anywhere outside the select box,<\/span>\r\n<span style=\"font-weight: 400;\">then close all select boxes:*\/<\/span>\r\n<span style=\"font-weight: 400;\">document.addEventListener(\"click\", closeAllSelect);<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86844\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-4-vippro.jpg\" alt=\"select html - itviec blog\" width=\"301\" height=\"682\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-4-vippro.jpg 301w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-4-vippro-132x300.jpg 132w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-4-vippro-282x640.jpg 282w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-4-vippro-88x200.jpg 88w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/p>\n<h3><b>T\u00f9y ch\u1ec9nh ch\u1ec9 v\u1edbi CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p, b\u1ea1n v\u1eabn c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n giao di\u1ec7n c\u1ee7a select box ch\u1ec9 v\u1edbi CSS. C\u00e1ch n\u00e0y s\u1ebd c\u00f3 thao t\u00e1c \u0111\u01a1n gi\u1ea3n, hi\u1ec7u qu\u1ea3 v\u00e0 d\u1ec5 tri\u1ec3n khai h\u01a1n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">.styled-select select {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0appearance: none; \u00a0 \u00a0 \u00a0 \u00a0 \/* \u1ea8n giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0-webkit-appearance: none; \/* Safari\/Chrome *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0-moz-appearance: none;\u00a0 \u00a0 \/* Firefox *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 10px 40px 10px 12px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 16px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 1px solid #ccc;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border-radius: 8px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: #f9f9f9;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-image: url('data:image\/svg+xml;utf8,&lt;svg fill=\"%23666\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;&lt;path d=\"M7 10l5 5 5-5z\"\/&gt;&lt;\/svg&gt;');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-repeat: no-repeat;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-position: right 12px center;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-size: 20px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: pointer;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;div class=\"styled-select\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"0\"&gt;Ch\u1ecdn h\u00e3ng xe&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"1\"&gt;Audi&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"2\"&gt;BMW&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"3\"&gt;Lexus&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"4\"&gt;Ford&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"5\"&gt;Honda&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>appearance: none:<\/b><span style=\"font-weight: 400;\"> \u1ea8n ho\u00e0n to\u00e0n giao di\u1ec7n g\u1ed1c c\u1ee7a select, gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng t\u00f9y bi\u1ebfn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-image:<\/b><span style=\"font-weight: 400;\"> D\u00f9ng SVG l\u00e0m m\u0169i t\u00ean ch\u1ec9 xu\u1ed1ng, gi\u00fap hi\u1ec3n th\u1ecb \u0111\u1eb9p v\u00e0 kh\u00f4ng c\u1ea7n JavaScript.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>background-position v\u00e0 padding:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh v\u1ecb tr\u00ed m\u0169i t\u00ean v\u00e0 kho\u1ea3ng c\u00e1ch b\u00ean trong.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86840\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-8-vippro.jpg\" alt=\"select html - itviec blog\" width=\"322\" height=\"457\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-8-vippro.jpg 322w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-8-vippro-211x300.jpg 211w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-8-vippro-141x200.jpg 141w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_the_select_HTML\"><\/span><b>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 th\u1ebb select HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eed d\u1ee5ng th\u1ebb &lt;select&gt; trong React?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng th\u1ebb select trong <\/span><a href=\"https:\/\/itviec.com\/blog\/reactjs-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">React<\/span><\/a><span style=\"font-weight: 400;\">, b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng HTML Select v\u00e0 t\u1ea1o m\u1ed9t m\u1ea3ng (array) cho c\u00e1c t\u00f9y ch\u1ecdn. S\u1eed d\u1ee5ng th\u1ebb select v\u00e0 l\u1eb7p l\u1ea1i c\u00e1c ph\u1ea7n t\u1eed m\u1ea3ng b\u00ean trong b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng array map \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c m\u1ee5c d\u01b0\u1edbi d\u1ea1ng t\u00f9y ch\u1ecdn.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tr\u00ean th\u1ebb &lt;select&gt;, b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh \u201conChange\u201d \u0111\u1ec3 gi\u1eef tham chi\u1ebfu \u0111\u1ebfn h\u00e0m \u201conOptionChangeHandler\u201d. H\u00e0m n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1ea5t c\u1ee9 khi n\u00e0o b\u1ea1n thay \u0111\u1ed5i gi\u00e1 tr\u1ecb c\u1ee7a dropdown.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Quy tr\u00ecnh th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<p><strong>B\u01b0\u1edbc 1: T\u1ea1o \u1ee9ng d\u1ee5ng React.js b\u1eb1ng l\u1ec7nh sau:<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">npx create-react-app foldername<\/span><\/pre>\n<p><strong>B\u01b0\u1edbc 2: Sau khi t\u1ea1o folder cho d\u1ef1 \u00e1n, ti\u1ebfp theo b\u1ea1n h\u00e3y di chuy\u1ec3n v\u00e0o th\u01b0 m\u1ee5c \u0111\u00f3 b\u1eb1ng l\u1ec7nh sau:<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">cd foldername<\/span><\/pre>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 3: Ti\u1ebfp theo, b\u1ea1n th\u1ef1c hi\u1ec7n \u0111o\u1ea1n m\u00e3 cho d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh.<\/strong> Ch\u1eb3ng h\u1ea1n nh\u01b0 v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, s\u1ebd t\u1ea1o m\u1ed9t m\u1ee5c v\u1edbi l\u1ef1a ch\u1ecdn th\u1ea3 xu\u1ed1ng (dropdown option). Trong \u0111\u00f3, c\u00f3 m\u1ed9t s\u1ed1 t\u00f9y ch\u1ecdn c\u00f3 trong array \u0111\u00e3 cho.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/\/ App.js<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import React, { useState } from \"react\";<\/span>\r\n<span style=\"font-weight: 400;\">import \".\/App.css\";<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const App = () =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0const [data, setData] = useState(undefined);<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const options = [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"HTML\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"CSS\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"JavaScript\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"React\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"Redux\",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0];<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0const onOptionChangeHandler = (event) =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setData(event.target.value);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"User Selected Value - \",<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0event.target.value<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0};<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return (<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;center&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1&gt; ITviec&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;HTML select tag in React js&lt;\/h3&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;select onChange={onOptionChangeHandler}&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option&gt;Please choose one option&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{options.map((option, index) =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option key={index} value={option}&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{option}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;You selected: {data} &lt;\/h3&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/center&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default App;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 ch\u1ea1y \u0111o\u1ea1n m\u00e3, b\u1ea1n th\u1ef1c hi\u1ec7n l\u1ec7nh b\u00ean d\u01b0\u1edbi t\u1eeb th\u01b0 m\u1ee5c g\u1ed1c c\u1ee7a d\u1ef1 \u00e1n l\u00e0 npm start. Sau \u0111\u00f3 s\u1ebd hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u1ed9i dung trang \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa theo chi\u1ec1u ngang.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u1ede tr\u00ean c\u00f9ng c\u00f3 ti\u00eau \u0111\u1ec1 l\u1edbn: ITviec<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">B\u00ean d\u01b0\u1edbi l\u00e0 ti\u00eau \u0111\u1ec1 nh\u1ecf h\u01a1n: HTML select tag in React js<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ti\u1ebfp theo l\u00e0 m\u1ed9t dropdown (h\u1ed9p ch\u1ecdn) v\u1edbi l\u1ef1a ch\u1ecdn \u0111\u1ea7u ti\u00ean l\u00e0: Please choose one option<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c l\u1ef1a ch\u1ecdn trong dropdown g\u1ed3m: HTML, CSS, <\/span><a href=\"https:\/\/itviec.com\/blog\/javascript-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">JavaScript<\/span><\/a><span style=\"font-weight: 400;\">, React v\u00e0 <\/span><a href=\"https:\/\/itviec.com\/blog\/redux-react-native-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Redux<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi b\u1ea1n ch\u1ecdn m\u1ed9t t\u00f9y ch\u1ecdn b\u1ea5t k\u1ef3 trong dropdown, b\u00ean d\u01b0\u1edbi h\u1ed9p ch\u1ecdn s\u1ebd hi\u1ec3n th\u1ecb d\u00f2ng ti\u00eau \u0111\u1ec1: You selected: [t\u00f9y ch\u1ecdn \u0111\u00e3 ch\u1ecdn]<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, n\u1ebfu b\u1ea1n ch\u1ecdn &#8220;React&#8221;, s\u1ebd hi\u1ec3n th\u1ecb: You selected: React<\/span><\/li>\n<\/ul>\n<h3><b>C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ebb &lt;optgroup&gt; v\u1edbi &lt;select&gt; kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e2u tr\u1ea3 l\u1eddi l\u00e0 C\u00f3. Ph\u1ea7n t\u1eed select c\u00f3 th\u1ec3 ch\u1ee9a c\u1ea3 ph\u1ea7n t\u1eed &lt;option&gt; v\u00e0 &lt;optgroup&gt;. Tuy nhi\u00ean, b\u1ea1n kh\u00f4ng th\u1ec3 l\u1ed3ng nhi\u1ec1u th\u1ebb &lt;optgroup&gt; v\u1edbi nhau m\u00e0 ch\u1ec9 c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n m\u1ed9t c\u1ea5p trong select.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;select&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;optgroup label=\"Tr\u00e1i c\u00e2y\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"apple\"&gt;T\u00e1o&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"banana\"&gt;Chu\u1ed1i&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/optgroup&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;optgroup label=\"Rau c\u1ee7\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"carrot\"&gt;C\u00e0 r\u1ed1t&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;option value=\"spinach\"&gt;Rau ch\u00e2n v\u1ecbt&lt;\/option&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/optgroup&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/select&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86843\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-5-vippro.jpg\" alt=\"select html - itviec blog\" width=\"202\" height=\"301\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-5-vippro.jpg 202w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-5-vippro-134x200.jpg 134w\" sizes=\"auto, (max-width: 202px) 100vw, 202px\" \/><\/p>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 x\u00f3a t\u00f9y ch\u1ecdn kh\u1ecfi select box?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">T\u00f9y ch\u1ecdn c\u1ea7n x\u00f3a s\u1ebd \u0111\u01b0\u1ee3c ch\u1ecdn b\u1eb1ng c\u00e1ch l\u1ea5y h\u1ed9p ch\u1ecdn (select box). Gi\u00e1 tr\u1ecb c\u1ea7n x\u00f3a \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh tr\u00ean value selector (value=\u2019optionValue\u2019) tr\u00ean h\u1ed9p ch\u1ecdn. Sau \u0111\u00f3, ph\u01b0\u01a1ng th\u1ee9c remove() \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00f3a t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c ch\u1ecdn n\u00e0y.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">$(\"selectBox option[value='optionValue']\").remove()<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;title&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Removing an item from a select box <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/title&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt; \r\n<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;h1 style=\"color: red\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">ITviec<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/h1&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;b&gt;X\u00f3a m\u1ed9t t\u00f9y ch\u1ecdn kh\u1ecfi select box&lt;\/b&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;p&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Ch\u1ecdn 1 trong c\u00e1c t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c cho: <\/span>\r\n<span style=\"font-weight: 400;\">&lt;select id=\"select1\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"free\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Free <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/option&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"basic\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Basic <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/option&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;option value=\"premium\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Premium <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/option&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/select&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/p&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Nh\u1ea5n n\u00fat b\u00ean d\u01b0\u1edbi \u0111\u1ec3 x\u00f3a m\u1ed9t t\u00f9y ch\u1ecdn kh\u1ecfi select box &lt;\/p&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;button onclick=\"removeOption()\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Remove option <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/button&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;script src= <\/span>\r\n<span style=\"font-weight: 400;\">\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;script type=\"text\/javascript\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">function removeOption() {\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* select the option with the <\/span>\r\n<span style=\"font-weight: 400;\">value of basic and remove the option*\/ <\/span>\r\n<span style=\"font-weight: 400;\">$(\"#select1 option[value='basic']\").remove(); <\/span>\r\n<span style=\"font-weight: 400;\">} <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 tr\u00ean t\u1ea1o m\u1ed9t trang web \u0111\u01a1n gi\u1ea3n v\u1edbi ba t\u00f9y ch\u1ecdn (Free, Basic, Premium) v\u00e0 m\u1ed9t n\u00fat b\u1ea5m. Khi nh\u1ea5n n\u00fat, t\u00f9y ch\u1ecdn c\u00f3 gi\u00e1 tr\u1ecb &#8220;basic&#8221; s\u1ebd b\u1ecb x\u00f3a kh\u1ecfi dropdown.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u1ebb &lt;select&gt;<\/b><span style=\"font-weight: 400;\"> c\u00f3 id &#8220;select1&#8221; ch\u1ee9a 3 t\u00f9y ch\u1ecdn v\u1edbi gi\u00e1 tr\u1ecb t\u01b0\u01a1ng \u1ee9ng: &#8220;free&#8221;, &#8220;basic&#8221;, &#8220;premium&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>N\u00fat &lt;button&gt;<\/b><span style=\"font-weight: 400;\"> c\u00f3 s\u1ef1 ki\u1ec7n onclick g\u1ecdi h\u00e0m JavaScript removeOption() khi \u0111\u01b0\u1ee3c nh\u1ea5n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u01b0 vi\u1ec7n <\/b><a href=\"https:\/\/itviec.com\/blog\/jquery-la-gi\/\" target=\"_blank\" rel=\"noopener\"><b>jQuery<\/b><\/a><span style=\"font-weight: 400;\"> phi\u00ean b\u1ea3n 3.3.1 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1 \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ti\u1ec7n \u00edch jQuery trong m\u00e3 JavaScript.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>H\u00e0m removeOption<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a \u0111\u1ec3 x\u1eed l\u00fd s\u1ef1 ki\u1ec7n khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5n n\u00fat.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Trong h\u00e0m, s\u1eed d\u1ee5ng jQuery selector $(&#8220;#select1 option[value=&#8217;basic&#8217;]&#8221;) \u0111\u1ec3 t\u00ecm ph\u1ea7n t\u1eed &lt;option&gt; trong &lt;select&gt; c\u00f3 id select1 v\u1edbi thu\u1ed9c t\u00ednh value=&#8221;basic&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ph\u01b0\u01a1ng th\u1ee9c .remove() c\u1ee7a jQuery<\/b><span style=\"font-weight: 400;\"> s\u1ebd x\u00f3a ph\u1ea7n t\u1eed n\u00e0y kh\u1ecfi DOM, t\u1ee9c l\u00e0 t\u00f9y ch\u1ecdn &#8220;Basic&#8221; s\u1ebd bi\u1ebfn m\u1ea5t kh\u1ecfi dropdown.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb khi ch\u01b0a nh\u1ea5n button:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86842\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-6-vippro.jpg\" alt=\"select html - itviec blog\" width=\"757\" height=\"295\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-6-vippro.jpg 757w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-6-vippro-300x117.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-6-vippro-640x249.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-6-vippro-200x78.jpg 200w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb khi \u0111\u00e3 nh\u1ea5n n\u00fat \u201cremove option\u201d:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-86841\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-7-vippro.jpg\" alt=\"select html - itviec blog\" width=\"667\" height=\"271\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-7-vippro.jpg 667w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-7-vippro-300x122.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-7-vippro-640x260.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-7-vippro-200x81.jpg 200w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam c\u00e1ch x\u00f3a t\u00f9y ch\u1ecdn v\u1edbi JavaScript thu\u1ea7n b\u1eb1ng c\u00e1ch l\u1ea5y th\u1ebb &lt;select&gt; b\u1eb1ng getElementById.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;X\u00f3a t\u00f9y ch\u1ecdn b\u1eb1ng JavaScript thu\u1ea7n&lt;\/title&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt; <\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;h1 style=\"color: red\"&gt;ITviec&lt;\/h1&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;b&gt;X\u00f3a m\u1ed9t t\u00f9y ch\u1ecdn kh\u1ecfi select box b\u1eb1ng JS thu\u1ea7n&lt;\/b&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Ch\u1ecdn m\u1ed9t trong c\u00e1c t\u00f9y ch\u1ecdn:\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;select id=\"select2\"&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"free\"&gt;Free&lt;\/option&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"basic\"&gt;Basic&lt;\/option&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"premium\"&gt;Premium&lt;\/option&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/select&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/p&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;Nh\u1ea5n n\u00fat b\u00ean d\u01b0\u1edbi \u0111\u1ec3 x\u00f3a m\u1ed9t t\u00f9y ch\u1ecdn kh\u1ecfi select box:&lt;\/p&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;button onclick=\"removeOptionJS()\"&gt;Remove option&lt;\/button&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;script type=\"text\/javascript\"&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function removeOptionJS() {\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const select = document.getElementById(\"select2\");<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (let i = 0; i &lt; select.options.length; i++) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (select.options[i].value === \"basic\") {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0select.remove(i);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/script&gt;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Gi\u1ea3i th\u00edch v\u00ed d\u1ee5 tr\u00ean:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">D\u00f9ng document.getElementById(&#8220;select2&#8221;) \u0111\u1ec3 l\u1ea5y th\u1ebb &lt;select&gt;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Duy\u1ec7t qua c\u00e1c options trong select box.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u1ebfu option n\u00e0o c\u00f3 value === &#8216;basic&#8217;, d\u00f9ng select.remove(i) \u0111\u1ec3 x\u00f3a option \u0111\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kh\u00f4ng c\u1ea7n d\u00f9ng th\u00eam th\u01b0 vi\u1ec7n ngo\u00e0i, ho\u1ea1t \u0111\u1ed9ng thu\u1ea7n tr\u00ean tr\u00ecnh duy\u1ec7t.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Select HTML<\/b><span style=\"font-weight: 400;\"> l\u00e0 th\u1ebb c\u1ea7n thi\u1ebft khi b\u1ea1n c\u1ea7n x\u00e2y d\u1ef1ng c\u00e1c form t\u01b0\u01a1ng t\u00e1c, gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tr\u00ean website. Khi s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1ch, th\u1ebb &lt;select&gt; kh\u00f4ng ch\u1ec9 gi\u00fap giao di\u1ec7n g\u1ecdn g\u00e0ng m\u00e0 c\u00f2n t\u0103ng t\u00ednh t\u01b0\u01a1ng t\u00e1c v\u00e0 t\u00ednh ch\u00ednh x\u00e1c c\u1ee7a d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c nh\u1eadp. Hy v\u1ecdng qua b\u00e0i vi\u1ebft, b\u1ea1n \u0111\u00e3 hi\u1ec3u r\u00f5 c\u00e1ch \u00e1p d\u1ee5ng th\u1ebb select trong HTML m\u1ed9t c\u00e1ch linh ho\u1ea1t v\u00e0 hi\u1ec7u qu\u1ea3 nh\u1ea5t.<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><a href=\"https:\/\/itviec.com\/blog\/html-la-gi\/\"><i><span style=\"font-weight: 400;\"><strong>Gi\u1ea3i \u0111\u00e1p \u201ct\u1ea5t t\u1ea7n t\u1eadt\u201d nh\u1eefng \u0111i\u1ec1u c\u1ea7n bi\u1ebft v\u1ec1 HTML<\/strong><\/span><\/i><\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Select HTML l\u00e0 th\u1ebb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c danh s\u00e1ch l\u1ef1a ch\u1ecdn d\u1ea1ng th\u1ea3 xu\u1ed1ng (dropdown list) trong bi\u1ec3u m\u1eabu (form) tr\u00ean website. Nh\u1edd v\u00e0o t\u00ednh \u0111\u01a1n gi\u1ea3n, d\u1ec5 thao t\u00e1c v\u00e0 kh\u1ea3 n\u0103ng \u1ee9ng d\u1ee5ng cao, th\u1ebb &lt;select&gt; th\u01b0\u1eddng xuy\u00ean \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c form \u0111\u0103ng k\u00fd, form li\u00ean h\u1ec7 [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":86848,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-86813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Select HTML \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o menu l\u1ef1a ch\u1ecdn trong bi\u1ec3u m\u1eabu web. Hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb select gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng UI th\u00e2n thi\u1ec7n h\u01a1n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML\" \/>\n<meta property=\"og:description\" content=\"Select HTML l\u00e0 th\u1ebb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c danh s\u00e1ch l\u1ef1a ch\u1ecdn d\u1ea1ng th\u1ea3 xu\u1ed1ng (dropdown list) trong bi\u1ec3u m\u1eabu (form) tr\u00ean website. Nh\u1edd v\u00e0o t\u00ednh \u0111\u01a1n gi\u1ea3n,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-10T14:25:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML - ITviec Blog","description":"Select HTML \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o menu l\u1ef1a ch\u1ecdn trong bi\u1ec3u m\u1eabu web. Hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb select gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng UI th\u00e2n thi\u1ec7n h\u01a1n.","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:\/\/itviec.com\/blog\/the-select-html-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML","og_description":"Select HTML l\u00e0 th\u1ebb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c danh s\u00e1ch l\u1ef1a ch\u1ecdn d\u1ea1ng th\u1ea3 xu\u1ed1ng (dropdown list) trong bi\u1ec3u m\u1eabu (form) tr\u00ean website. Nh\u1edd v\u00e0o t\u00ednh \u0111\u01a1n gi\u1ea3n,","og_url":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-05-10T14:25:17+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png","type":"image\/png"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"16 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML","datePublished":"2025-05-10T14:25:17+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/"},"wordCount":3773,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/","url":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/","name":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png","datePublished":"2025-05-10T14:25:17+00:00","description":"Select HTML \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o menu l\u1ef1a ch\u1ecdn trong bi\u1ec3u m\u1eabu web. Hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb select gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng UI th\u00e2n thi\u1ec7n h\u01a1n.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/the-select-html-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/05\/select-html-vippro-scaled.png","width":640,"height":337,"caption":"select html - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Select HTML l\u00e0 g\u00ec? C\u00e1ch t\u1ea1o danh s\u00e1ch l\u1ef1a ch\u1ecdn trong HTML"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=86813"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/86813\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/86848"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=86813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=86813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=86813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}