In this post, I demonstrate how to use a multi-select dropdown in a Web App on Google Sheets. This will in turn store the multiple values in a cell on Google Sheets.
How to Video:
Video Notes:
- Legacy Apps Script Editor Used in Video
- Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
- For Further Details on Deploying a Web App Click Here
Code in Video:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Web App Multi Select</h1>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<label style="font-size: 20px" >Name</label><br>
<input type="text" name="name" style="font-size: 20px" /><br><br>
<label style="font-size: 20px" >Favorite Colors</label><br>
<select name="colors" multiple style="font-size: 20px" >
<option value="Red" >Red</option>
<option value="Blue" >Blue</option>
<option value="Yellow" >Yellow</option>
<option value="Green" >Green</option>
<option value="Orange" >Orange</option>
<option value="Brown" >Brown</option>
<option value="White" >White</option>
<option value="Black" >Black</option>
</select><br><br>
<input type="submit" name="submitButton" value="Submit" style="font-size: 20px" />
<span style="font-size: 20px" ><?= message ?></span>
</form>
</body>
</html>
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('MultiSelect');
htmlOutput.message = '';
return htmlOutput.evaluate();
}
function doPost(e) {
Logger.log(JSON.stringify(e));
var name = e.parameters.name.toString();
var colors = e.parameters.colors.toString();
AddRecord(name, colors);
var htmlOutput = HtmlService.createTemplateFromFile('MultiSelect');
htmlOutput.message = 'Record Added';
return htmlOutput.evaluate();
}
function AddRecord(name, colors) {
var url = ''; //URL OF GOOGLE SHEET;
var ss= SpreadsheetApp.openByUrl(url);
var dataSheet = ss.getSheetByName("DATA");
dataSheet.appendRow([name, colors, new Date()]);
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
Related Posts





