我有一个从电子表格填充的数据列表中的选项列表。当我单击空字段时，它会显示所有选项。列出的所有选项。选中一个选项后，我无法再次点击查看所有选项。我必须删除该选项，然后才能再次看到所有选项。只有一种选择。看起来像一个自动填充或历史气泡。
<form id="edit" autocomplete="off">
<div>Choose an employee:<input list="employee" onchange="javascript:submit();">
<datalist id="employee">
<? var emp = getCurrentEmployees(); ?>
<? for(x=0;x<emp.length;x++) { ?>
<option value="
<?= emp[x] ?>
">
</option>
<? } ?>
</datalist>
我试过将自动完成设置为关闭，并尝试了设置onchange的建议。两人似乎都没在做什么。
我用这个作为谷歌表格的边栏html服务。
完整HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<?!= include('CSS') ?>
</head>
<body>
<?!= include('LOGO') ?>
<form id="edit" autocomplete="off">
<div>Choose an employee:<input list="employee" onchange="javascript:submit();">
<datalist id="employee">
<? var emp = getCurrentEmployees(); ?>
<? for(x=0;x<emp.length;x++) { ?>
<option value="
<?= emp[x] ?>
">
</option>
<? } ?>
</datalist>
</div><hr>
<div><input id="fName" type="text" /> First Name</div>
<div><input id="lName" type="text" /> Last Name</div>
<div><input id="empId" type="text" /> ID#</div>
<div><input id="job" type="text" /> Job</div>
<div><input id="wage" type="text" /> Wage</div>
<div id="job2" style="display: none"><input id="jobtwo" type="text" /> Job 2</div>
<div id="wage2" style="display: none"><input id="wagetwo" type="text" /> Wage 2</div>
<div id="job3" style="display: none"><input id="jobthree" type="text" /> Job 3</div>
<div id="wage3" style="display: none"><input id="wagethree" type="text" /> Wage 3</div>
<div>
<button id="enter" type="button" onclick="addRecord()"> Enter</button>
<button id="more" type="button" onclick="moreJobs()"> + Job</button>
<button id="less" type="button" onclick="lessJobs()"> - Job</button>
<button id="close" type="button" onclick="closeSide()"> Close</button>
</div>
</form>
<?!= include('EditEmpJS') ?>
</body>
</html>
完整代码文件
const ws =
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("EMPLOYEES");
const setup = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SETUP");
const summary = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SUMMARY");
const ui = SpreadsheetApp.getUi();
function onOpen(e) {
ui.createMenu("👔 Employees")
.addItem("💼 Add Employee", "addEmp")
.addItem("✨ Edit Employee", "editEmp")
.addItem("🔥 Del Employee", "delEmp")
.addToUi();
ui.createMenu("📋 Departments")
.addItem("➕ Add Department", "addDept")
.addItem("🔧 Edit Department", "editDept")
.addItem("➖ Del Department", "delDept")
.addToUi();
ui.createMenu("⌚ Schedule")
.addItem("📅 Add Week", "addSched")
.addItem("🔎 Update Summary Tab", "updateTabs")
.addToUi();
updateTabs();
}
function updateTabs() {
var tabList = SpreadsheetApp.getActiveSpreadsheet().getSheets().map((s) => s.getName())
.filter((s) => s != "SETUP" && s != "EMPLOYEES" && s != "TEMPLATE" && s != "SUMMARY")
Logger.log(tabList)
var rule = SpreadsheetApp.newDataValidation().requireValueInList(tabList)
var dropDown = summary.getRange("A1").setDataValidation(rule).activate();
}
function include(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent();
}
//ADD EDIT & REMOVE EMPLOYEE HTML
function addEmp() {
var page = HtmlService.createTemplateFromFile("AddEmp").evaluate();
page.setTitle("💼 Add Employee")
ui.showSidebar(page)
}
function editEmp() {
var page = HtmlService.createTemplateFromFile("EditEmp").evaluate();
page.setTitle("✨ Edit Employee");
ui.showSidebar(page)
}
function delEmp() {
var page = HtmlService.createTemplateFromFile("DelEmp").evaluate();
page.setTitle("🔥 Delete Employee");
ui.showSidebar(page)
}
//checks for an id# and job code
// if id# already exist, err to checkId
// if job doesn't exist, eff to checkJob
function addEmpRecord(record) {
let array_target = ws.getRange("C2");
let array_formula = array_target.getFormula();
array_target.clear();
if (!checkId(record[2]) && !checkJob(record[3])) {
ws.getRange(ws.getLastRow() + 1, 1, 1, 10).setValues([[
record[0], record[1], , record[2].toString(), record[3].toUpperCase(), record[4], record[5].toUpperCase(), record[6], record[7].toUpperCase(), record[8]
]])
var html = HtmlService.createHtmlOutput("<h4>Entry Accepted</h4><p>Close sidebar to continue or add another employee.</p>")
.setWidth(300)
.setHeight(125);
ui.showModalDialog(html, "Success!")
}
else if (checkId(record[2].toString())) {
var html = HtmlService.createHtmlOutput("<h4>User id# already exists</h4><p>Please choose different id#</p>")
.setWidth(200)
.setHeight(75);
ui.showModalDialog(html, "Warning!")
}
else if (checkJob(record[3])) {
var html = HtmlService.createHtmlOutput("<h4>Job Code does not exitst</h4><p>Please choose a valid job code.<br>*Case sensitive</p>")
.setWidth(200)
.setHeight(75);
ui.showModalDialog(html, "Warning!")
}
else {
var html = HtmlService.createHtmlOutput("<h4>Unspecified error</h4><p>Please contact support.</p>")
.setWidth(200)
.setHeight(75);
ui.showModalDialog(html, "Warning!")
}
array_target.setValue(array_formula)
}
// checks if an id# already exists
function checkId(num) {
var result = false;
var current_ids = ws.getRange(2, 4, ws.getLastRow(), 1).getValues();
for (id = 0; id < current_ids.length; id++) {
if (current_ids[id].toString() == num.toString()) {
result = true
}
}
return result
}
// checks if a job code exists
function checkJob(job) {
var result = false;
var current_jobs = setup.getRange(2, 3, setup.getLastRow(), 1).getValues();
for (job = 0; job < current_jobs.length; job++) {
if (current_jobs[job] == job) {
result = true
}
}
return result
}
function getCurrentEmployees() {
return ws.getRange("C2:C").getValues();
}
function getEmployeeRecord(employee) {
var list = ws.getRange("C2:C").getValues();
for(e=0;e<list.length;e++) {
if(list[e] == employee) {
return ws.getRange(e+1,1,1,10).getValues();
}
}
}
编辑:我在文档站点上得到了相同的结果。如果它正常工作，我如何得到一个动态选择输入?
Mozilla所有选项
选择后，只显示选中的一个。
将类型从datalist更改为select修复了此问题。
<form id="edit" autocomplete="off">
<div>Choose an employee:<br>
<select id="employee" onchange="changeTarget(document.getElementById('employee'))">
<? var emp = getCurrentEmployees(); ?>
<? for(x=0;x<emp.length;x++) { ?>
<option value="
<?= emp[x] ?>
">
<?= emp[x] ?>
</option>
<? } ?>
</select>
autocomplete和onchange属性对更改没有帮助。
感谢@Tanaike帮助识别问题