Question

我正在尝试创建一个表单。我希望我的客户能够将文本输入到文本字段中，然后从下拉列表中选择一个项目，下拉列表是根据数据库查询构建的，该查询将其转换为json，然后将所选的json值显示在下拉列表。我附上了一张图片，希望能更好地解释一下。 form drawing

Answer 1

我不确定你在等什么，但是因为你没有回答......

如果您想阻止这种情况：event.preventDefault();

event.preventDefault();就像创可贴一样。 EG它可以防止默认行为。但是，在您的代码中，没有任何内容表示单击按钮时应提交表单，因此不应提交。我的猜测是你没有使用按钮，而是使用提交按钮。

在任何情况下，您都可以在提交之前使用onsubmit进行检查：

onsubmit="validateMyForm()"

并在不满足某些条件时阻止默认行为。

你说那些链接在这里作为占位符。在阅读本文之前，这让我很困惑，所以我必须再次编辑我的答案。请下次使用像spans或div这样无关紧要的东西。

是的，您可以在此下拉列表中输入，以回答您的评论。

Secundo，你有多个下拉菜单吗？

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

这部分将使用下拉类循环遍历所有元素，你只有1个元素，为什么循环呢？也许您有多个下拉列表，因此点击页面上的任何其他位置都会关闭所有下拉列表。

if（！event.target.matches（＆＃39; .dropbtn＆＃39;））

这匹配什么？按钮。因此，单击除按钮外的任何位置将使下拉菜单关闭。但是，当您点击所述下拉列表项时，是否要关闭下拉列表？

我试图向您传达的是，您尝试制作的用户体验似乎存在缺陷。

进一步阅读：

带有下拉菜单的html表单在提交按钮上提交表单

1 个答案: