{"id":10473,"date":"2023-04-03T18:03:03","date_gmt":"2023-04-03T12:33:03","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=10473"},"modified":"2023-04-03T18:03:06","modified_gmt":"2023-04-03T12:33:06","slug":"dynamic-html-dropdown-from-google-sheet","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/dynamic-html-dropdown-from-google-sheet\/","title":{"rendered":"Create Dynamic HTML Dropdown from Google Sheet"},"content":{"rendered":"\n<p>Learn how to create dynamic HTML dropdown from Google Sheet for a more user-friendly and engaging website. Our step-by-step guide will show you how to easily integrate this feature and improve  user experience.<\/p>\n\n\n\n<p>Welcome Friends \u092e\u0948\u0902 \u0939\u0942\u0902 \u0938\u0902\u0926\u0940\u092a \u0928\u093f\u0917\u092e \u0914\u0930 \u0906\u091c \u0906\u092a\u0915\u094b \u092c\u0924\u093e\u090a\u0902\u0917\u093e \u0915\u093f\u0938 \u0924\u0930\u0939 \u0938\u0947 \u0906\u092a Google Apps Script \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0905\u092a\u0928\u0947 HTML \u092a\u0930 Dropdown\/Select\/Data list \u0926\u093f\u0916\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902.  \u091c\u0948\u0938\u093e \u0915\u0940 \u0906\u092a\u0915\u094b \u0928\u093f\u092e\u094d\u0928 Image \u092e\u0947 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947 \u0930\u0939\u093e \u0939\u094b\u0917\u093e<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"363\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=609%2C363&#038;ssl=1\" alt=\"Dynamic HTML Dropdown from Google Sheet\" class=\"wp-image-10475\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?w=609&amp;ssl=1 609w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=150%2C89&amp;ssl=1 150w\" sizes=\"auto, (max-width: 609px) 100vw, 609px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u0938\u0947 \u092a\u0939\u0932\u0947 \u0915\u0947 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u092e\u0947 \u0939\u092e\u0928\u0947 \u090f\u0915 HTML Bootstrap Invoice \u0909\u0938\u0915\u0947 \u092c\u093e\u0926 \u0909\u0938\u092e\u0947 Dynamic Rows Creation \u0914\u0930 Delete \u0915\u0947 \u0932\u093f\u090f jQuery \u0915\u0947 logic \u0932\u093f\u0916\u0947 \u092b\u093f\u0930 Invoice \u0915\u0947 Data \u0915\u094b Google Sheet \u092a\u0930 Submit \u0915\u093f\u092f\u093e \u0914\u0930 \u0905\u092c \u0939\u092e Google Sheet \u0938\u0947 Dropdown \u0932\u0917\u093e\u0928\u093e \u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u0938\u0947 \u0938\u0940\u0916\u0947\u0902\u0917\u0947 \u0964 \u0905\u092d\u0940 \u0924\u0915 \u0915\u0947 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u092a\u095d\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0928\u0940\u091a\u0947 \u0932\u093f\u0902\u0915 \u0926\u0947 \u0930\u0939\u093e \u0939\u0941 \u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/complete-invoice-with-calculation\/\">COMPLETE INVOICE WITH CALCULATION + PRINT (BOOTSTRAP + JS + JQUERY) ITS FREE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/submit-html-form-to-google-sheet\/\">SUBMIT A HTML FORM TO GOOGLE SHEET USING APPS SCRIPT<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u0905\u092c \u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u092e\u0947 \u0939\u092e dropdown \/ select \/ Data list \u0932\u0917\u093e\u0928\u093e \u0938\u0940\u0916\u0947\u0902\u0917\u0947 \u0964 <\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#step-1-create-google-sheet\">Step 1 : Create Google Sheet<\/a><\/li><li><a href=\"#step-2-apps-script-code\">Step 2 : Apps Script Code <\/a><\/li><li><a href=\"#step-3-java-script-code\">Step 3 : JavaScript Code<\/a><\/li><li><a href=\"#step-4-html-code-for-dropdown\">Step 4 : HTML Code For Dropdown<\/a><ul><li><a href=\"#4-1-html-code-for-select-option-tag\">4.1 HTML Code For  Select Option<\/a><\/li><li><a href=\"#4-2-html-code-for-datalist-tag\">4.2 HTML Code For  Input datalist <\/a><\/li><\/ul><\/li><li><a href=\"#apps-script-related-videos\">APPS SCRIPT RELATED VIDEOS<\/a><\/li><li><a href=\"#\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\">\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Step For Create Dynamic HTML Dropdown from Google Sheet<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 1 &#8211; Create Google Sheet :<\/strong> \u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u090f\u0915 \u0917\u0942\u0917\u0932 \u0936\u0940\u091f \u092c\u0928\u093e\u090f\u0902 \u091c\u093f\u0938\u092e\u0947\u0902 \u0906\u092a\u0915\u094b \u091c\u094b \u0921\u093e\u091f\u093e \u0926\u093f\u0916\u093e\u0928\u093e \u0939\u094b \u0935\u0939 \u0932\u0917\u093e\u090f\u0902<\/li>\n\n\n\n<li><strong>Step 2 &#8211; Apps Script Code :<\/strong> \u0905\u092c \u0939\u092e Apps \u0915\u093e \u090f\u0915 Function \u0932\u093f\u0916\u0947\u0902\u0917\u0947 \u091c\u094b \u0915\u093f Google Sheet \u0938\u0947 \u0921\u093e\u091f\u093e \u0915\u094b \u0932\u0947\u0915\u0930 \u0909\u0938\u0947 JSON \u092e\u0947\u0902 Convert \u0915\u0930 \u0939\u092e\u0947\u0902 Data Return \u0915\u0930\u0947\u0917\u093e.<\/li>\n\n\n\n<li><strong>Step 3 &#8211; JavaScript Code : <\/strong>\u0907\u0938\u0915\u0947 \u092c\u093e\u0926 JavaScript \u0915\u093e \u090f\u0915 Function \u092c\u0928\u093e\u0915\u0930 \u0939\u092e\u0928\u0947 \u091c\u094b Apps Script Link  \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0921\u093e\u091f\u093e \u0915\u094b \u092f\u0939\u093e\u0902 \u092a\u0930 \u0917\u0947\u091f \u0915\u0930 \u0932\u0947\u0902\u0917\u0947 \u0914\u0930 \u0909\u0938\u0938\u0947 HTML \u092a\u0930 \u0938\u0947\u091f \u0915\u0930 \u0926\u0947\u0902\u0917\u0947 .<\/li>\n\n\n\n<li><strong>Step 4 &#8211; HTML Code :<\/strong> \u0905\u092c \u0939\u092e\u0947\u0902 HTML \u092e\u0947\u0902 \u090f\u0915 \u0915\u093e Data List \u092f\u093e \u092b\u093f\u0930 Select Option \u092c\u0928\u093e\u0928\u093e \u0939\u094b\u0917\u093e.<\/li>\n<\/ul>\n\n\n\n<p>\u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 (Create Dynamic HTML Dropdown from Google Sheet)  \u0915\u093e Video \u092d\u0940 Available \u0939\u0948\u0902\u0964 <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Dynamic HTML Dropdown from Google Sheet | Apps Script | Google Sheet to Datalist\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/mPn7sGxbfOA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-create-google-sheet\"><strong>Step 1 <\/strong>: <strong>Create Google Sheet<\/strong><\/h2>\n\n\n\n<p>\u0939\u092e\u0928\u0947 \u092f\u0939\u093e\u0902 \u092a\u0930 \u090f\u0915 Google sheet \u092c\u0928\u093e\u0908 \u0939\u0948 \u0914\u0930 \u0907\u0938\u092e\u0947\u0902 \u092a\u0939\u0932\u0947 \u0915\u0949\u0932\u092e \u092e\u0947\u0902 \u091c\u094b \u092d\u0940 Item \u0915\u0940 \u0932\u093f\u0938\u094d\u091f \u0939\u092e Invoice \u092e\u0947\u0902 \u0926\u093f\u0916\u093e\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0935\u0939 \u0939\u092e\u0928\u0947 \u092f\u0939\u093e\u0902 \u092a\u0930 \u091f\u093e\u0907\u092a \u0915\u0940 \u0939\u0948 \u0914\u0930 \u0907\u0938 \u0921\u093e\u091f\u093e \u0915\u094b \u0939\u092e \u091c\u094b script  \u0932\u093f\u0916 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0909\u0938\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 HTML \u092a\u0930 \u0926\u093f\u0916\u093e\u090f\u0902\u0917\u0947.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"497\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image.png?resize=270%2C497&#038;ssl=1\" alt=\"Google Sheet for dropdown\" class=\"wp-image-10474\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image.png?w=270&amp;ssl=1 270w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image.png?resize=163%2C300&amp;ssl=1 163w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image.png?resize=150%2C276&amp;ssl=1 150w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-apps-script-code\">S<strong>tep 2 : Apps Script Code <\/strong><\/h2>\n\n\n\n<p>\u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e Apps Script  \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 ,\u0939\u092e\u0928\u0947 \u091c\u094b Google Sheet \u092c\u0928\u093e\u0908 \u0939\u0948 \u0909\u0938\u0947 Link \u0915\u0930, \u0909\u0938\u0915\u0947 \u0921\u093e\u091f\u093e \u0915\u094b  doGet Function \u092e\u0947\u0902 \u092a\u0939\u0932\u0947 \u0915\u0949\u0932\u092e \u0915\u0947 \u0921\u093e\u091f\u093e \u0915\u094b \u092b\u093f\u0932\u094d\u091f\u0930 \u0915\u0930 \u0930\u093f\u091f\u0930\u094d\u0928 \u0915\u0930\u0947\u0902\u0917\u0947. <\/p>\n\n\n\n<p>Create Dynamic HTML Dropdown from Google Sheet \u0915\u0947 \u0932\u093f\u090f Apps Script Code \u0907\u0938 \u092a\u094d\u0930\u0915\u093e\u0930 \u0939\u0948<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">let MySheets = SpreadsheetApp.openByUrl(\"https:\/\/docs.google.com\/spreadsheets\/d\/1cS....\");  \/\/01\nlet ItemSheet = MySheets.getSheetByName(\"Item\");  \/\/02\nfunction doGet(e) {\n  let page = e.parameter.page;                    \/\/03\n\n  if (page == null || page == undefined) {\n    page = \"index\";\n    return HtmlService.createTemplateFromFile(page).evaluate();\n  }\n  else if (page == 'dropdown') {                  \/\/04\n    let table = ItemSheet.getRange(\"A:A\").getValues().filter(r =&gt; r.every(Boolean));                                \/\/05\n    let str = JSON.stringify(table);              \/\/06\n    return ContentService.createTextOutput(str);  \/\/07 \n  }\n}<\/code><\/pre>\n\n\n\n<p>&nbsp;\u0905\u092c \u092e\u0948\u0902 \u0906\u092a\u0915\u094b \u0907\u0938 \u0938\u094d\u0915\u094d\u0930\u093f\u092a\u094d\u091f \u092e\u0947\u0902 \u091c\u094b \u0938\u094d\u091f\u0947\u091f\u092e\u0947\u0902\u091f \u0932\u093f\u0916\u0947 \u0939\u0948\u0902 \u0909\u0928\u0915\u093e \u0915\u094d\u092f\u093e \u0905\u0930\u094d\u0925 \u0939\u0948 \u0935\u0939 \u090f\u0915-\u090f\u0915 \u0915\u0930 \u0938\u092e\u091d\u093e\u0924\u093e \u0939\u0942\u0902<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>01. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 \u090f\u0915 \u0938\u094d\u0915\u094d\u0930\u093f\u092a\u094d\u091f  \u0938\u0947 \u0939\u092e\u093e\u0930\u0940 Google Sheet \u092b\u093e\u0907\u0932 \u0915\u094b \u0932\u093f\u0902\u0915 \u0915\u093f\u092f\u093e&nbsp; \u0939\u0948, Inverted Commas (&#8220;) \u0915\u0947 \u0905\u0902\u0926\u0930 \u0906\u092a\u0915\u094b \u0905\u092a\u0928\u0940 Google Sheet&nbsp; \u0915\u093e URL \u0932\u093f\u0916\u0928\u093e \u0939\u0948.<\/li>\n\n\n\n<li>02. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 Google Sheets \u092e\u0947\u0902 \u091c\u094b Second Sheet \u0939\u0948 Item \u0935\u093e\u0932\u0940 \u0909\u0938\u0915\u094b \u0932\u093f\u0902\u0915 \u0915\u093f\u092f\u093e \u0939\u0948.<\/li>\n\n\n\n<li>03. \u092f\u0939\u093e\u0902 \u092a\u0930  \u0939\u092e\u0928\u0947 \u091c\u094b URL \u0938\u0947 Parameter \u092a\u093e\u0938 \u0915\u093f\u090f \u0939\u0948\u0902 \u0909\u0928\u094d\u0939\u0947\u0902 Get \u0915\u0930\u0947\u0902\u0917\u0947.<\/li>\n\n\n\n<li>04. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e URL\u092e\u0947\u0902 \u091c\u094b \u0939\u092e\u0928\u0947 Page \u0915\u093e \u0928\u093e\u092e \u0926\u093f\u092f\u093e \u0925\u093e \u0909\u0938\u0915\u0940 Base \u092a\u0930 Condition \u0932\u0917\u093e\u090f\u0902\u0917\u0947 \u0924\u093e\u0915\u093f \u0939\u092e Multiple \u092b\u0902\u0915\u094d\u0936\u0928 \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0947\u0902.<\/li>\n\n\n\n<li>05. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 \u092a\u0939\u0932\u0947 \u0915\u0949\u0932\u092e \u0915\u0940 \u0935\u0948\u0932\u094d\u092f\u0942 Get \u0915\u0940 \u0939\u0948 , Filter \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0907\u0938\u0932\u093f\u090f \u0915\u093f\u092f\u093e \u0939\u0948 \u0924\u093e\u0915\u093f \u092f\u0926\u093f \u0915\u094b\u0908 Blank Value\u0939\u094b \u0924\u094b \u0935\u0939 \u0928\u093e \u0906\u090f.<\/li>\n\n\n\n<li>06. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 \u091c\u094b Array \u092e\u0947\u0902 \u0935\u0948\u0932\u094d\u092f\u0942 Get \u0915\u0940 \u0939\u0948 \u0909\u0938\u0947 JSON String \u092e\u0947\u0902 Convert \u0915\u0930\u0947\u0902\u0917\u0947.<\/li>\n\n\n\n<li>07. \u0905\u092c \u0905\u0902\u0924 \u092e\u0947\u0902 \u0939\u092e \u092f\u0939\u093e\u0902 \u092a\u0930  JSON String \u0930\u093f\u091f\u0930\u094d\u0928 \u0915\u0930 \u0926\u0947\u0902\u0917\u0947.<\/li>\n<\/ul>\n\n\n\n<p>\u092f\u0939\u093e\u0902 \u092a\u0930 Apps Script \u0915\u093e \u0915\u093e\u092e \u092a\u0942\u0930\u093e \u0939\u094b\u0924\u093e \u0939\u0948 \u0905\u092c \u0906\u092a \u0907\u0938\u0947 Deploy \u0915\u0930 \u0932\u0947 \u0914\u0930 Deploy \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u091c\u094b Link \u0906\u090f\u0917\u0940 \u0909\u0938\u0947  \u092f\u0939\u093e\u0902 \u0938\u0947 \u0915\u0949\u092a\u0940 \u0915\u0930\u0947\u0902 . \u0907\u0938 \u0932\u093f\u0902\u0915 \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0939\u092e \u091c\u093e\u0935\u093e \u0938\u094d\u0915\u094d\u0930\u093f\u092a\u094d\u091f \u092e\u0947\u0902 \u0915\u0930\u0947\u0902\u0917\u0947. \u092f\u0926\u093f \u0906\u092a \u092a\u0939\u0932\u0940 \u092c\u093e\u0930 Deploy \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u092c \u0928\u093f\u092e\u094d\u0928 \u0932\u093f\u0902\u0915 \u0915\u0940 \u092e\u0926\u0926 \u0932\u0947 \u0964 <\/p>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/deploying-apps-script-as-a-web-api\/\">Deploying Apps Script as a Web API: A Step-by-Step Guide<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-java-script-code\">Step 3 : JavaScript Code<\/h2>\n\n\n\n<p>\u0905\u092c \u0939\u092e JavaScript \u0915\u093e Code \u0932\u093f\u0916\u0947\u0902\u0917\u0947 \u091c\u093f\u0938\u092e\u0947\u0902 \u0939\u092e\u0928\u0947 \u091c\u094b Apps script \u0938\u0947 \u092a\u094d\u0930\u094b\u091c\u0947\u0915\u094d\u091f \u0915\u094b Deploy \u0915\u093f\u092f\u093e \u0939\u0948 \u0909\u0938 Link \u0915\u094b \u0939\u092e \u092f\u0939\u093e\u0902 \u092a\u0930 \u0932\u0917\u093e\u0915\u0930 Apps Script \u0938\u0947 \u091c\u094b \u0921\u093e\u091f\u093e Return \u0915\u093f\u092f\u093e \u0925\u093e \u0909\u0938\u0947 \u0939\u092e \u092f\u0939\u093e\u0902 \u092a\u0930 Get  \u0915\u0930\u0947\u0902\u0917\u0947 \u0914\u0930 HTML \u092e\u0947\u0902 Set \u0915\u0930\u0947\u0902\u0917\u0947<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">function FillDataList()\n{\n        $.getJSON(\"https:\/\/script.google.com\/macros\/s\/\"+AppsScriptLink+\"\/exec?page=dropdown\", \n        function (data) {                              \/\/01\n          var Options=\"\";                              \n          $.each(data, function(key, value)            \/\/02\n          {\n            Options = Options + '&lt;option&gt;' + value + '&lt;\/option&gt;';   \/\/03\n          });\n          $(\".item_nm\").append(Options);               \/\/04\n        });\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>01: \u0907\u0938 \u0932\u093e\u0907\u0928 \u0915\u0947 \u092a\u0939\u0932\u0947 Parameter \u092e\u0947\u0902 \u0906\u092a\u0915\u094b Apps Script \u0915\u0940 Link \u0926\u0947\u0928\u093e \u0939\u0948 \u091c\u094b \u0915\u093f \u0939\u092e\u0928\u0947 \u0905\u092d\u0940 Deploy \u0915\u0940 \u0925\u0940.<\/li>\n\n\n\n<li>02: \u0905\u092c \u091c\u094b \u0939\u092e\u093e\u0930\u0947 \u092a\u093e\u0938 Return Data \u0906\u092f\u093e \u0939\u0948 \u0909\u0938\u0947 \u0939\u092e\u0928\u0947 \u090f\u0915 Loop \u0932\u0917\u093e\u0915\u0930 JSON String \u0915\u094b \u0905\u0932\u0917 \u0905\u0932\u0917 \u0915\u0930 \u0932\u093f\u092f\u093e \u0939\u0948&nbsp;<\/li>\n\n\n\n<li>03. JSON \u0938\u094d\u091f\u094d\u0930\u093f\u0902\u0917 \u0915\u094b \u0905\u0932\u0917 \u0905\u0932\u0917 \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u0939\u092e\u093e\u0930\u0947 \u092a\u093e\u0938 \u091c\u094b Value \u0906\u0908 \u0939\u0948 \u0909\u0938\u0947 \u0939\u092e\u0928\u0947 Option Tag \u092e\u0947\u0902 \u091c\u094b\u0921\u093c \u0915\u0930 \u090f\u0915 String <\/li>\n\n\n\n<li>04. \u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e \u091c\u094b HTML \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947\u0902\u0917\u0947  \u0909\u0938\u092e\u0947\u0902  \u090f\u0915 \u0915\u093e Data List \u092f\u093e Select Option \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u0909\u0938\u092e\u0947\u0902 \u0939\u092e\u0928\u0947 \u092f\u0939 \u091c\u094b \u0905\u092d\u0940 String \u092c\u0928\u093e\u0908 \u0939\u0948 \u0909\u0938\u0947 \u0939\u092e \u092f\u0939\u093e\u0902 \u092a\u0930 &nbsp;jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Append \u0915\u0930 \u0926\u0947\u0902\u0917\u0947 .<\/li>\n<\/ul>\n\n\n\n<p>\u0939\u092e\u0928\u0947 \u0905\u092d\u0940 \u091c\u094b \u092f\u0939 \u0909\u092a\u0930\u094b\u0915\u094d\u0924 \u092b\u0902\u0915\u094d\u0936\u0928 \u092c\u0928\u093e\u092f\u093e \u0939\u0948 \u0907\u0938\u0947 \u091c\u092c Page Load \u0939\u0948 \u0909\u0938 \u0938\u092e\u092f \u092a\u0930 Call \u0915\u0930 \u0926\u0947\u0902\u0917\u0947. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">$(document).ready(function () {\n    FillDataList();\n});\n<\/code><\/pre>\n\n\n\n<p>\u0907\u0924\u0928\u093e \u0915\u0930\u0928\u0947 \u092a\u0930 \u0906\u092a\u0915\u093e JavaScript \u0915\u093e Work Complete \u0939\u094b\u0924\u093e \u0939\u0948 \u0905\u092c \u0939\u092e HTML \u092a\u0930 Work \u0915\u0930\u0947\u0902\u0917\u0947 . <\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-html-code-for-dropdown\">Step 4 : HTML Code For Dropdown<\/h2>\n\n\n\n<p>\u0926\u0947\u0916\u093f\u090f HTML \u092e\u0947\u0902 \u0906\u092a 2 \u0924\u0930\u0939 \u0938\u0947 \u0906\u092a \u0907\u0938 \u0921\u093e\u091f\u093e \u0915\u094b \u0926\u093f\u0916\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 <\/p>\n\n\n\n<p>\u092a\u0939\u0932\u093e \u0924\u094b \u0906\u092a &lt;SELECT&gt; &lt;OPTION&gt; \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0932\u0947\u0902 \u091c\u093f\u0938\u092e\u0947\u0902 \u0921\u0947\u091f\u093e \u090f\u0915 Dropdown \u0915\u0947 \u092b\u0949\u0930\u094d\u092e\u0947\u091f \u092e\u0947\u0902 \u0926\u093f\u0916\u0947\u0917\u093e \u0914\u0930 \u0906\u092a \u0909\u0938\u092e\u0947\u0902 \u0938\u0947 \u0915\u094b\u0908 \u092d\u0940 \u0930\u093f\u0915\u0949\u0930\u094d\u0921 \u0938\u093f\u0932\u0947\u0915\u094d\u091f \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 <\/p>\n\n\n\n<p>\u0926\u0942\u0938\u0930\u093e \u0911\u092a\u094d\u0936\u0928 \u0906\u092a\u0915\u0947 \u092a\u093e\u0938 \u092f\u0939 \u0939\u0948 \u0915\u093f \u0906\u092a &lt;datalist&gt;  \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947\u0902 \u0907\u0938\u092e\u0947\u0902 \u0906\u092a\u0915\u094b \u090f\u0915 Benefit \u092f\u0939 \u092e\u093f\u0932\u0947\u0917\u093e \u0915\u093f \u0906\u092a \u091c\u0948\u0938\u0947 \u091c\u0948\u0938\u0947 \u091f\u093e\u0907\u092a \u0915\u0930\u0947\u0902\u0917\u0947 \u0906\u092a\u0915\u0947 \u092a\u093e\u0938 \u090f\u0915 \u092b\u093f\u0932\u094d\u091f\u0930 \u0932\u093f\u0938\u094d\u091f \u0906\u0924\u0940 \u091c\u093e\u090f\u0917\u0940, <\/p>\n\n\n\n<p>\u091c\u0948\u0938\u0940 \u0906\u092a\u0915\u0947 \u092a\u094d\u0930\u094b\u091c\u0947\u0915\u094d\u091f \u0915\u0940 Requirement \u0939\u0948 \u0909\u0938\u0915\u0947 \u0905\u0928\u0941\u0938\u093e\u0930 \u0906\u092a  Select Option \u092f\u093e \u092b\u093f\u0930 Datalist \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u092e\u0948\u0902\u0928\u0947 \u092f\u0939\u093e\u0902 \u092a\u0930 \u0906\u092a\u0915\u094b \u0926\u094b\u0928\u094b\u0902 \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u092c\u0924\u093e\u092f\u093e \u0939\u0948 \u0924\u094b \u0907\u0938\u092e\u0947\u0902 \u0938\u0947 \u0915\u094b\u0908 \u092d\u0940 \u090f\u0915 \u0906\u092a \u0905\u092a\u0928\u0947 Project \u092e\u0947\u0902 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-1-html-code-for-select-option-tag\">4.1 HTML Code For Select Option Tag<\/h3>\n\n\n\n<p>\u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 Dropdown \u092e\u0947\u0902 \u0921\u093e\u091f\u093e \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f Select Option \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948 \u0939\u092e\u0928\u0947 \u091c\u094b JavaScript Code \u0932\u093f\u0916\u093e \u0925\u093e \u0909\u0938\u092e\u0947\u0902 \u0906\u092a\u0928\u0947 \u0926\u0947\u0916\u093e \u0939\u094b\u0917\u093e \u0915\u093f jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e\u0928\u0947 \u090f\u0915 Class \u091c\u093f\u0938\u0915\u093e \u0928\u093e\u092e item_nm  \u0925\u093e \u0909\u0938\u092e\u0947\u0902 Data \u0915\u094b Append \u0915\u093f\u092f\u093e \u0925\u093e<\/p>\n\n\n\n<p>\u0939\u092e\u0928\u0947 item_nm Class \u092f\u0939\u093e\u0902 \u092a\u0930 Select Tag \u0915\u0940 Class \u092e\u0947\u0902 \u0926\u0940 \u0939\u0948 \u091c\u093f\u0938\u0915\u0947 \u0915\u093e\u0930\u0923 \u0935\u0939 \u091c\u094b Data \u0939\u092e Apps Script \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Google Sheet \u0938\u0947 \u0932\u093e\u090f \u0925\u0947 \u0935\u0939 \u092f\u0939\u093e\u0902 \u092a\u0930 Append \u0939\u094b \u091c\u093e\u090f\u0917\u093e.<\/p>\n\n\n\n<p>Name Attribute \u092e\u0947\u0902 \u091c\u094b \u0939\u092e\u0928\u0947 item_nm \u0932\u093f\u0916\u093e \u0939\u0948 \u0935\u0939 \u0921\u093e\u091f\u093e \u0915\u094b Google Sheet \u092a\u0930 Submit  \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0932\u093f\u0916\u093e \u0939\u0948 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"> &lt;select class=\"form-control item_nm\" name=\"item_nm\"  autocomplete=\"off\"&gt;\n      &lt;option&gt;Select&lt;\/option&gt;\n &lt;\/select&gt;<\/code><\/pre>\n\n\n\n<p>HTML \u092e\u0947\u0902 \u0909\u092a\u0930\u094b\u0915\u094d\u0924 Code \u0932\u093f\u0916\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u091c\u092c \u0906\u092a \u0909\u0938\u0947 Browser \u092e\u0947\u0902 Preview \u0915\u0930 \u0926\u0947\u0916\u0947\u0902\u0917\u0947 \u0924\u094b \u092a\u093e\u090f\u0902\u0917\u0947 \u0915\u093f \u0915\u0941\u091b \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0938\u0947 Display Dropdown \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u093e.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"363\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=609%2C363&#038;ssl=1\" alt=\"Create Dynamic HTML Dropdown from Google Sheet\" class=\"wp-image-10475\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?w=609&amp;ssl=1 609w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-1.png?resize=150%2C89&amp;ssl=1 150w\" sizes=\"auto, (max-width: 609px) 100vw, 609px\" \/><\/figure>\n<\/div>\n\n\n<p>\u092f\u0939\u093e\u0902 \u092a\u0930 \u092e\u0948\u0902\u0928\u0947 \u0906\u092a\u0915\u094b \u0915\u0947\u0935\u0932 drop-down \u0932\u0917\u093e\u0928\u0947 \u0915\u093e Logic \u092c\u0924\u093e\u092f\u093e \u0939\u0948 \u092f\u0926\u093f \u0906\u092a \u092f\u0939 \u092a\u0942\u0930\u093e  Invoice HTML Bootstrap \u0938\u0947 \u092c\u0928\u093e\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0907\u0938\u0915\u0947 \u0932\u093f\u090f \u092e\u0948\u0902 \u0906\u092a\u0915\u094b \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u0915\u093e Link \u0926\u0947 \u0930\u0939\u093e \u0939\u0942\u0902 \u0906\u092a \u092f\u0939\u093e\u0902 Click \u0915\u0930 \u0909\u0938\u0947 \u0938\u092e\u091d \u0915\u0930 \u092c\u0939\u0941\u0924 \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u092c\u0928\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-2-html-code-for-datalist-tag\">4.2 HTML Code For Datalist Tag<\/h3>\n\n\n\n<p>\u092f\u0939\u093e\u0902 \u092a\u0930 \u0939\u092e\u0928\u0947 Filter Datalist \u092e\u0947\u0902 \u0921\u093e\u091f\u093e \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f &lt;input&gt; and &lt;datalist&gt; \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948 \u0939\u092e\u0928\u0947 \u091c\u094b JavaScript Code \u0932\u093f\u0916\u093e \u0925\u093e \u0909\u0938\u092e\u0947\u0902 \u0906\u092a\u0928\u0947 \u0926\u0947\u0916\u093e \u0939\u094b\u0917\u093e \u0915\u093f jQuery \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e\u0928\u0947 \u090f\u0915 Class \u091c\u093f\u0938\u0915\u093e \u0928\u093e\u092e item_nm  \u0925\u093e \u0909\u0938\u092e\u0947\u0902 Data \u0915\u094b Append \u0915\u093f\u092f\u093e \u0925\u093e.<\/p>\n\n\n\n<p>\u0939\u092e\u0928\u0947 item_nm Class \u092f\u0939\u093e\u0902 \u092a\u0930 Datalist Tag \u0915\u0940 Class \u092e\u0947\u0902 \u0926\u0940 \u0939\u0948 \u091c\u093f\u0938\u0915\u0947 \u0915\u093e\u0930\u0923 \u0935\u0939 \u091c\u094b Data \u0939\u092e Apps Script \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Google Sheet \u0938\u0947 \u0932\u093e\u090f \u0925\u0947 \u0935\u0939 \u092f\u0939\u093e\u0902 \u092a\u0930 Append \u0939\u094b \u091c\u093e\u090f\u0917\u093e.<\/p>\n\n\n\n<p>&lt;Input&gt; Tag \u0915\u0947 Name Attribute \u092e\u0947\u0902 \u091c\u094b \u0939\u092e\u0928\u0947 item_nm \u0932\u093f\u0916\u093e \u0939\u0948 \u0935\u0939 \u0921\u093e\u091f\u093e \u0915\u094b Google Sheet \u092a\u0930 Submit \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0932\u093f\u0916\u093e \u0939\u0948 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;input class=\"form-control \" name=\"item_nm\" list=\"mylist\" autocomplete=\"off\"&gt;\n&lt;datalist id=\"mylist\" class=\"item_nm\"&gt; &lt;\/datalist&gt;\n<\/code><\/pre>\n\n\n\n<p>&lt;input&gt; tag \u092a\u0930 Data \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0947\u0902 datalist \u0915\u094b input \u0938\u0947 Link \u0915\u0930\u0928\u093e \u0939\u094b\u0924\u093e \u0939\u0948 \u0914\u0930 Link \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e list Attribute \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 List Attribute \u092e\u0947\u0902 \u0939\u092e datalist \u0915\u0940 id \u0926\u0947\u0924\u0947 \u0939\u0948\u0902 \u091c\u093f\u0938\u0938\u0947 \u0935\u0939 datalist Link \u0939\u094b\u0915\u0930 \u0939\u092e\u0947\u0902 \u0921\u093e\u091f\u093e \u0926\u093f\u0916\u093e\u0924\u0940 \u0939\u0948 \u0914\u0930 \u0939\u092e \u091c\u0948\u0938\u0947 \u091c\u0948\u0938\u0947 Type \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0935\u0939 Data Filter \u0939\u094b\u0924\u093e \u091c\u093e\u0924\u093e \u0939\u0948 \u091c\u0948\u0938\u093e \u0915\u093f \u0906\u092a\u0915\u094b \u092a\u094d\u0930\u0940\u0935\u094d\u092f\u0942 \u092e\u0947\u0902 \u0926\u093f\u0916\u093e\u092f\u093e \u0939\u0948.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"253\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-2.png?resize=640%2C253&#038;ssl=1\" alt=\"Dynamic HTML Datalist from Google Sheet\" class=\"wp-image-10476\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-2.png?w=997&amp;ssl=1 997w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-2.png?resize=300%2C119&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-2.png?resize=768%2C304&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/03\/image-2.png?resize=150%2C59&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preview 1 :<\/strong>  \u091c\u0948\u0938\u0947 \u0939\u0940 \u0906\u092a item name &lt;input&gt; Tag \u092a\u0930 Click \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b \u0906\u092a\u0915\u094b \u090f\u0915 \u0932\u093f\u0938\u094d\u091f \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u0940 \u091c\u093f\u0938\u092e\u0947\u0902 \u092a\u0942\u0930\u093e \u0921\u093e\u091f\u093e \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u093e \u091c\u094b \u0939\u092e\u0928\u0947 Google Sheet \u092e\u0947\u0902 \u0906\u0907\u091f\u092e \u0935\u093e\u0932\u0940 Sheet \u092a\u0930 \u0932\u093f\u0916\u093e \u0925\u093e. <\/li>\n\n\n\n<li><strong>Preview 2 :<\/strong> \u0909\u0938\u0915\u0947 \u092c\u093e\u0926 \u0906\u092a \u091c\u0948\u0938\u0947 \u0939\u0940 &lt;input&gt; tag \u092a\u0930 C \u091f\u093e\u0907\u092a \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b C \u0938\u0947 Related \u091c\u094b \u0921\u093e\u091f\u093e \u0909\u0938 \u0932\u093f\u0938\u094d\u091f \u092e\u0947\u0902 \u0939\u0948 \u0935\u0939 Filter \u0939\u094b\u0915\u0930 \u0906\u092a\u0915\u094b \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u093e \u091c\u0948\u0938\u0947 \u092f\u0939\u093e\u0902 \u092a\u0930 C \u0938\u0947 \u0930\u093f\u0932\u0947\u091f\u0947\u0921 Computer, Cabinet \u0914\u0930 Scanner \u0926\u093f\u0916\u093e\u0908 \u0926\u0947 \u0930\u0939\u093e \u0939\u0948, Scanner \u092e\u0947  \u092c\u0940\u091a \u092e\u0947\u0902 C \u0939\u094b\u0928\u0947 \u0915\u0947 \u0915\u093e\u0930\u0923 \u0906\u092a\u0915\u094b Scanner  \u092d\u0940 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947 \u0930\u0939\u093e.<\/li>\n\n\n\n<li><strong>Preview 3 :<\/strong> \u0907\u0938\u0940 \u0938\u0930\u094d\u091a \u0915\u094b \u0906\u0917\u0947 \u091c\u093e\u0930\u0940 \u0930\u0916\u0924\u0947 \u0939\u0941\u090f C \u0915\u094b \u0939\u091f\u093e\u0915\u0930 \u091c\u0948\u0938\u0947 \u0939\u0940 P Type \u0915\u0930\u0942\u0902\u0917\u093e \u0924\u094b P \u0938\u0947 Related \u091c\u094b \u092d\u0940 \u092e\u0947\u0930\u0947 \u092a\u093e\u0938 Item \u0939\u0948 \u0935\u0939 \u0938\u092d\u0940 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0902\u0917\u0947 \u091a\u093e\u0939\u0947 \u0909\u0928\u092e\u0947\u0902 \u092d\u0940 \u0936\u0941\u0930\u0942 \u092e\u0947\u0902 P \u0906 \u0930\u0939\u093e \u0939\u094b,  \u092c\u0940\u091a \u092e\u0947\u0902 P \u0906 \u0930\u0939\u093e \u0939\u094b \u092f\u093e \u0906\u0916\u0930\u0940 \u092e\u0947\u0902 P \u0906 \u0930\u0939\u093e \u0939\u094b.<\/li>\n<\/ul>\n\n\n\n<p>\u0906\u0936\u093e \u0939\u0948 \u092e\u0941\u091d\u0947 \u0906\u092a\u0915\u094b \u092f\u0939 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 Dropdown List \u092e\u0947\u0902 Google Sheet \u0915\u0947 \u0921\u093e\u091f\u093e \u0915\u094b \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u091c\u094b \u092e\u0947\u0930\u0947 \u0926\u094d\u0935\u093e\u0930\u093e \u092c\u0928\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948 \u092c\u0939\u0941\u0924 \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u0938\u092e\u091d \u092e\u0947\u0902 \u0906 \u0917\u092f\u093e \u0939\u094b\u0917\u093e \u092f\u0926\u093f \u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u0938\u0947 \u0930\u093f\u0932\u0947\u091f\u0947\u0921 \u0906\u092a\u0915\u0947 \u092e\u0928 \u092e\u0947\u0902 \u0915\u094b\u0908 \u092d\u0940 Query \u0939\u094b \u0915\u094b\u0908 \u092d\u0940 Doubt \u0939\u094b \u0924\u094b \u0906\u092a \u0928\u093f\u0938\u0902\u0915\u094b\u091a \u092e\u0941\u091d\u0947 \u0915\u092e\u0947\u0902\u091f \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 .<\/p>\n\n\n\n<p>\u092f\u0939 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 Create Dynamic HTML Dropdown from Google Sheet \u0915\u0948\u0938\u093e \u0932\u0917\u093e \u092e\u0941\u091d\u0947 \u0915\u092e\u0947\u0902\u091f \u0915\u0930 \u092c\u0924\u093e\u0928\u093e \u0928\u093e \u092d\u0942\u0932\u0947\u0902 , \u092e\u093f\u0932\u0924\u0947 \u0939\u0948\u0902 \u0928\u0947\u0915\u094d\u0938\u094d\u091f \u0906\u0930\u094d\u091f\u093f\u0915\u0932 \u092e\u0947\u0902 Thank for Reading.<\/p>\n\n\n\n<p>\u0905\u092a\u0928\u093e \u0915\u0940\u092e\u0924\u0940 \u0938\u092e\u092f \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0927\u0928\u094d\u092f\u0935\u093e\u0926<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apps-script-related-videos\">APPS SCRIPT RELATED VIDEOS<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/youtu.be\/GctW-oYLdPo\" target=\"_blank\" rel=\"noreferrer noopener\">How to Fix Bad Request Error 400 in Google Apps Script<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/playlist?list=PLCWrLhzYkkf5earV5KmsY1mZBW1k__zQf\" target=\"_blank\" rel=\"noreferrer noopener\">Learn Google Apps Script Playlist Invoice Example<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create dynamic HTML dropdown from Google Sheet for a more user-friendly and engaging website. Our step-by-step guide will show you how to easily integrate this feature and improve user experience. Welcome Friends \u092e\u0948\u0902 \u0939\u0942\u0902 \u0938\u0902\u0926\u0940\u092a \u0928\u093f\u0917\u092e \u0914\u0930 \u0906\u091c \u0906\u092a\u0915\u094b \u092c\u0924\u093e\u090a\u0902\u0917\u093e \u0915\u093f\u0938 \u0924\u0930\u0939 \u0938\u0947 \u0906\u092a Google Apps Script \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0905\u092a\u0928\u0947 HTML [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10703,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[],"class_list":["post-10473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-apps-script"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/04\/dropdown-from-google-sheet.jpg?fit=1280%2C720&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=10473"}],"version-history":[{"count":158,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10473\/revisions"}],"predecessor-version":[{"id":10705,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/10473\/revisions\/10705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/10703"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=10473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=10473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=10473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}