HTML输入datalist不允许重新选择选项。

17 浏览
0 Comments

HTML输入datalist不允许重新选择选项。

我有一个选项列表,数据列表是从电子表格中填充的。

当我点击空白字段时,它会显示所有选项。

列出了所有选项。

选择一个选项后,我不能再次点击它以查看所有选项。

我必须删除该选项,然后才能再次看到所有选项。

只显示一个选项。看起来像是自动填充或历史记录气泡。

 
选择一个员工:

我已尝试将自动填充设置为关闭,并尝试了一个设置onchange的建议。

但似乎都没有起作用。

我正在将其用作Google表格中的侧边栏HTML服务。

完整的HTML代码:




  
  


  
  
    选择一个员工:
    
      
      
      
      
    
    
名字 姓氏 ID号 工作 工资 第二份工作 第二份工资 第三份工作 第三份工资

完整的代码文件:

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(" 员工")

.addItem(" 添加员工", "addEmp")

.addItem(" 编辑员工", "editEmp")

.addItem(" 删除员工", "delEmp")

.addToUi();

ui.createMenu(" 部门")

.addItem(" 添加部门", "addDept")

.addItem(" 编辑部门", "editDept")

.addItem(" 删除部门", "delDept")

.addToUi();

ui.createMenu(" 日程")

.addItem(" 添加周", "addSched")

.addItem(" 更新汇总选项卡", "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();

}

//添加、编辑和删除员工的HTML

function addEmp() {

var page = HtmlService.createTemplateFromFile("AddEmp").evaluate();

page.setTitle(" 添加员工")

ui.showSidebar(page)

}

function editEmp() {

var page = HtmlService.createTemplateFromFile("EditEmp").evaluate();

page.setTitle(" 编辑员工");

ui.showSidebar(page)

}

function delEmp() {

var page = HtmlService.createTemplateFromFile("DelEmp").evaluate();

page.setTitle(" 删除员工");

ui.showSidebar(page)

}

//检查是否存在ID号和工作代码

//如果ID号已存在,则返回到checkId

//如果工作不存在,则返回到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("

记录已接受

关闭侧边栏以继续或添加另一个员工。")

.setWidth(300)

.setHeight(125);

ui.showModalDialog(html, "成功!")

}

else if (checkId(record[2].toString())) {

var html = HtmlService.createHtmlOutput("

用户ID号已存在

请选择不同的ID号。")

.setWidth(200)

.setHeight(75);

ui.showModalDialog(html, "警告!")

}

else if (checkJob(record[3])) {

var html = HtmlService.createHtmlOutput("

工作代码不存在

请选择有效的工作代码。
*区分大小写")

.setWidth(200)

.setHeight(75);

ui.showModalDialog(html, "警告!")

}

else {

var html = HtmlService.createHtmlOutput("

未知错误

请联系支持人员。")

.setWidth(200)

.setHeight(75);

ui.showModalDialog(html, "警告!")

}

array_target.setValue(array_formula)

}

//检查ID号是否已存在

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

}

//检查工作代码是否存在

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

if(list[e] == employee) {

return ws.getRange(e+1,1,1,10).getValues();

}

}

}

编辑:

我在文档网站上得到了相同的结果。

如果它的行为符合预期,那么除了datalist之外,如何获得动态的选择输入?

0
0 Comments

问题的原因是HTML input datalist不允许重新选择选项。根据给出的内容,问题的解决方法是将datalist的类型更改为select。

解决方法的代码如下所示:

Choose an employee:

在这个解决方法中,添加了一个select元素来替代datalist元素,并且将onchange属性添加到select元素,以便在选择不同的选项时调用changeTarget函数。

autocomplete和onchange属性在解决问题时没有起作用。

感谢某人(名称未给出)提供的帮助,帮助我们找到了问题的原因。

0