Google sheet apps script | Dropdown đơn giản lấy dữ liệu từ google sheet – Simple dropdown
Giaoan.link chia sẻ đến các bạn project Google sheet apps script | Dropdown đơn giản lấy dữ liệu từ google sheet – Simple dropdown. Bên dưới đây là video demo minh họa và code apps script để bạn tham khảo.
Bạn truy cập vào đây để tìm kiếm nhiều project thú vị khác.
Các project, excel ngẫu nhiên:
- Web App Script CSS JS | Tạo hiệu ứng Click button Nổ tung các mảnh giấy và chuyển link
- Web App Script CSS | Tạo button Liên hệ gồm 3 option đẹp mắt cho trang web
- Web App Script Webapp | Hiệu ứng hoa rơi – Form nhập liệu Gửi nội dung đến email
- Web App Script | Thanh trạng thái Status bar – Giá trị thể hiện theo điểm và label.
- Google sheet Apps script | Data Entry Form – Tự động đọc số tiền thành chữ ở trường input
- Google sheet Apps script | Cập nhật điểm lớp học – Theo danh sách lớp và Theo từng học sinh
- Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input
- Google sheet apps script | Chọn năm và kiểu biểu đồ để Load dữ liệu lên website
- Google sheet apps script | Scan QR code – Filter and get data table display on webapp
- Google sheet apps script Filter to get data to display on webapp, fill background color for data row
Mã apps script trên trang “Code.gs”
function doGet() {
var output = HtmlService.createTemplateFromFile('Index');
return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
//Dropdown
function getOptions(){
let MySheets =SpreadsheetApp.getActive();
let CitySheetNHCS = MySheets.getSheetByName("Data");
let data = CitySheetNHCS.getRange('A2:A').getValues().filter(d => d[0] !== "");
let newArr = data.map(d => d[0]);
let uniqueList = [];
newArr.map(r => {
if(uniqueList.indexOf(r) === -1){
uniqueList.push(r);
}
})
return uniqueList.sort().reverse();
};
let options = getOptions().map(d => "<option>" + d + "</option>").join("");
//End Dropdown
Mã trên trang “Index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="border: solid 2px #aafe7d; background-color: brown; border-radius: 10px; width: 800px;">
<div style="text-align: center;">
<p>
<pan style="color: white; font-weight:bold;">SIMPLE DROPDOWN DEPENDENT GET VALUE FROM SHEET<br>
Dropdown Lấy Giá Trị Từ Sheet</h5></p>
</div>
<p>
<div class="input-group">
<span class="input-group-text bg-primary text-white"><i class="bi-mailbox"></i> </i>Nhập Email của bạn <span style="color: yellow;"> *</span></span>
<input type="email" class="form-control" id="id_nhcs" name="id_nhcs" autocomplete="off" required>
</div> </p>
<p>
<div class="input-group">
<span class="input-group-text bg-primary text-white"><i class="bi-list-check"></i> </i>Chọn Project bạn yêu cầu <span style="color: yellow;"> *</span></span>
<select class="form-control" id="id_nhcs" name="id_nhcs" autocomplete="off" required>
<option></option>
<?!=options?>
</select>
</div></p>
<button class="btn btn-warning mb-3 w-5 fw-bold btn-outline-success">Gửi yêu cầu</button>
</div>
</body>
</html>