index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/css2?family=Prompt" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Prompt' !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- เริ่มต้นเนื้อหา container -->
<div class="container mt-5">
<div class="row">
<div class="col-lg-6 col-md-6 mx-auto shadow border bg-white p-4 rounded">
<form id="myform" onsubmit="save(this)">
<div class="row">
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colA"> รายการแรก</label>
<select class="form-control" id="colA" name="colA" required>
<option value="" selected='selected'>เลือก......</option>
</select>
</div>
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colฺB"> รายการที่ 2</label>
<select class="form-control" id="colB" name="colB" required>
<option value="" selected='selected'>เลือก......</option>
</select>
</div>
</div>
<div class="row">
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colฺC"> รายการที่ 3</label>
<select class="form-control" id="colC" name="colC" required>
<option value="" selected='selected'>เลือก.......</option>
</select>
</div>
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colD" > รายการที่ 4</label>
<select class="form-control" id="colD" name="colD" required>
<option value="" selected='selected'>เลือก.....</option>
</select>
</div>
<div class="col mb-3">
<label style="font-size:16px; color:black" for="colE" > รายการที่ 5</label>
<select class="form-control" id="colE" name="colE" required>
<option value="" selected='selected'>เลือก....</option>
</select>
</div>
<div class="row">
<div class="col mb-3">
<button type="submit " class="btn btn-block btn-primary mb-2">บันทึก</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
window.onload = function(){
google.script.run.withSuccessHandler(dropDownList).getData()
}
//ดรอปดาวน์
function dropDownList(obj){
const colA = document.getElementById('colA')
const colB = document.getElementById('colB')
const colC = document.getElementById('colC')
const colD = document.getElementById('colD')
const colE = document.getElementById('colE')
const firstList = []
let list = []
// สร้างรายการแรก
obj.filter(r =>{
firstList.push(r[0])
list = [...new Set(firstList.flat())]
})
for(let i in list){
colA.options[colA.options.length] = new Option(list[i],list[i])
}
// สร้างรายการย่อย
function subMenu (e){
const inx = parseInt(e[0])
const optionList = document.getElementById(e[1])
const arr = []
let val = []
obj.filter(r =>{
if(r[inx] === e[2]){
arr.push(r[inx+1])
}
val = [...new Set(arr.flat())]
})
for(let i in val){
optionList.options[optionList.options.length] = new Option(val[i],val[i])
}
}
//คลิกเลือกรายการที่ 1
colA.onchange = function(){
colB.length = 1
colC.length = 1
colD.length = 1
colE.length = 1
subMenu ([0,"colB",this.value])
}
//คลิกเลือกรายการที่ 2
colB.onchange = function(){
colC.length = 1
colD.length = 1
colE.length = 1
subMenu ([1,"colC",this.value])
}
//คลิกเลือกรายการที่ 3
colC.onchange = function(){
colD.length = 1
colE.length = 1
subMenu ([2,"colD",this.value])
}
//คลิกเลือกรายการที่ 4
colD.onchange = function(){
colE.length = 1
subMenu ([3,"colE",this.value])
}
}
function save(e){
event.preventDefault()
google.script.run.withSuccessHandler((data) => {
alert(data)
document.getElementById('myform').reset()
}).saveData(e)
}
</script>
</body>
</html>
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.setTitle("My project")
.addMetaTag('viewport','width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("list")
const data = sheet.getDataRange().getDisplayValues().slice(1)
return data
}
function saveData(data) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data")
sheet.appendRow([
new Date(),
data.colA,
data.colB,
data.colC,
data.colD,
data.colE
])
return true
}