HTML and Javascript Code Below: function loadCars() { google.script.run.withSuccessHandler(function(ar) { var carsSelect = document.getElementById("cars"); console.log(ar);
Google Apps Script Code in Video Below: function getList() { var ss= SpreadsheetApp.getActiveSpreadsheet(); var carSheet = ss.getSheetByName("CARS"); var getLastRow = carSheet.getLastRow(); return carSheet.getRange(2, 1, getLastRow - 1, 2).getValues(); } function startForm() { var form = HtmlService.createHtmlOutputFromFile('dropdownList'); SpreadsheetApp.getUi().showSidebar(form); } function addMenu() { var menu = SpreadsheetApp.getUi().createMenu('Custom'); menu.addItem('Dropdown Form', 'startForm'); menu.addToUi(); } function onOpen(e) { addMenu(); }
thanks for the code. It still didn't work for me (no items in combobox), BUT - I ran it in Firefox and it worked. Do you know of any computer/browser settings for Chrome that would prevent the code from running. Google seems to be choking on it's own code. thanks again.
I am the first one to Comment, Thanku , My request I have a spreadsheet with Fields Name , Age , Photograph. How may i import from Spreadsheet and display in HTML page one row at a time , with a next button in html page to display next record of the spread sheet and prev button to display prev record. Thanking you
Is this code posted anywhere? I've checked my code against the video 10 times over for typos and it still doesn't work. I'm not getting the array to populate the dropdown. thanks,
David, I was going crazy with this one too, but I found the issue which is probably the same one you had, getElementById will prepopulate in the editor as getElementByID capitalizing the D at the end which is not a recognized command in JavaScript, try change it out (all 3 times) and give it a run
My use case is similar but I don't have a value pair. I just have a list that I want to show in the dropdown. In the video, he's not clear about whether the HTML select element requires a value pair or not. In fact, he makes it seem optional but I'm thinking maybe it's not. (Like, maybe displaying the value on click is optional but maybe the select element requires value pairs.) Anybody know for sure?
Hi, What about if I wanted to save the value from the "var carID = document.getElementById("cars").value;" into another GSheet through a form that uses those dynamic dropdown options? I tried to to turn the code inside the onSelect() into "document.getElementById("cars").value;" but whenever I submit the form it only records a blank option despite the dropdown showing the dynamic options from the Gsheet. I hope you'd see this as I really need help on it. Thank you.
This is great. Thanks for the video. Would there be anyway to add a step, so when we choose an option in the dropdown we could set that value in a cell in the worksheet?? Almost like the span id option, but only in a cell and not in the sidebar? Thanks
HTML and Javascript Code Below:
function loadCars() {
google.script.run.withSuccessHandler(function(ar)
{
var carsSelect = document.getElementById("cars");
console.log(ar);
let option = document.createElement("option");
option.value = "";
option.text = "";
carsSelect.appendChild(option);
ar.forEach(function(item, index)
{
let option = document.createElement("option");
option.value = item[1];
option.text = item[0];
carsSelect.appendChild(option);
});
}).getList();
};
function onSelect()
{
var carID = document.getElementById("cars").value;
document.getElementById("carValue").innerHTML = carID;
};
loadCars();
Google Apps Script Code in Video Below:
function getList() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var carSheet = ss.getSheetByName("CARS");
var getLastRow = carSheet.getLastRow();
return carSheet.getRange(2, 1, getLastRow - 1, 2).getValues();
}
function startForm()
{
var form = HtmlService.createHtmlOutputFromFile('dropdownList');
SpreadsheetApp.getUi().showSidebar(form);
}
function addMenu()
{
var menu = SpreadsheetApp.getUi().createMenu('Custom');
menu.addItem('Dropdown Form', 'startForm');
menu.addToUi();
}
function onOpen(e)
{
addMenu();
}
thanks for the code. It still didn't work for me (no items in combobox), BUT - I ran it in Firefox and it worked. Do you know of any computer/browser settings for Chrome that would prevent the code from running. Google seems to be choking on it's own code. thanks again.
Not sure what would be going on. I run my code through Chrome and Firefox is pretty similar to chrome when it comes to browsers.
@@davidgall4185 I tried with google also doesn't work. May I know the solution?
I am the first one to Comment, Thanku ,
My request
I have a spreadsheet with Fields Name , Age , Photograph.
How may i import from Spreadsheet and display in HTML page one row at a time , with a next button in html page to display next record of the spread sheet and prev button to display prev record.
Thanking you
Sir, Is it possible to include in external html file?
Is this code posted anywhere? I've checked my code against the video 10 times over for typos and it still doesn't work. I'm not getting the array to populate the dropdown.
thanks,
I posted the code in the comments for both HTML file and GS file. Hope this helps
@@CodeWithCurt There is no link for the codes
David, I was going crazy with this one too, but I found the issue which is probably the same one you had, getElementById will prepopulate in the editor as getElementByID capitalizing the D at the end which is not a recognized command in JavaScript, try change it out (all 3 times) and give it a run
My use case is similar but I don't have a value pair. I just have a list that I want to show in the dropdown. In the video, he's not clear about whether the HTML select element requires a value pair or not. In fact, he makes it seem optional but I'm thinking maybe it's not. (Like, maybe displaying the value on click is optional but maybe the select element requires value pairs.) Anybody know for sure?
Bro, can you guide me the same requirement in web input instated off side of the
Google sheet.
I have a dropdown in a web app in this video. I hope that is what you were asking for.
th-cam.com/video/6dDXaTP5Bgs/w-d-xo.html
@@CodeWithCurt yes, exactly what I want. Thank you bro.
Hi,
What about if I wanted to save the value from the "var carID = document.getElementById("cars").value;" into another GSheet through a form that uses those dynamic dropdown options? I tried to to turn the code inside the onSelect() into "document.getElementById("cars").value;" but whenever I submit the form it only records a blank option despite the dropdown showing the dynamic options from the Gsheet.
I hope you'd see this as I really need help on it.
Thank you.
This is great. Thanks for the video.
Would there be anyway to add a step, so when we choose an option in the dropdown we could set that value in a cell in the worksheet?? Almost like the span id option, but only in a cell and not in the sidebar? Thanks
Hii...
I'm making a html form to submit data in DB,
How can I add the Google sheet columns in select tag, can you give me the relevant code🙂
Just marvelous. Very useful, Curt. Exactly the code I am looking for. I also appreciate your relaxed instruction style. Good luck and good wishes.
Thanks Curt it was a good instruction, how about to get those values as a columnon a sidebar?
how to create dropdown from a google sheet using javascript
hi , i need a html form which is populate dropdown all column integrate from google sheet
Want to ask at 2:11 seconds how to add "CUSTOM MENU". thank you
How do to same Thing in Web app instead of Side bar
I've watched a bunch of your videos and you usually have a link in the description or codes in the comments. I don't see them this time.
Where are the links for the code? I still can't find them.
how do you make this dependent drop down?
Just wondering if I can add a .css file to my .html on Google Sheets?
Does this work on Mobile devices?
This is super. Thanks.
Thank you sir.
can i copy the code ,,
Thanks!
Grazie.
Wonderful! Thank you!
A Million thanks Sir 🙏