Question

我正在从事一个项目。我试图制作我的代码，以便当用户从下拉菜单中提交选项时，如果用户选择并提交默认值（＆＃34;选择一种类型＆＃34;），则表单未提交，页面未刷新。以下是我的Javascript代码：

<script>

    var menu = document.getElementById("submit");
        menu.addEventListener("click", function() {
            if (document.getElementById("dropdown").value == 'nothing')
            {
                return false;
            }
        });

</script

这嵌套在head标签内。

以下是表单的HTML代码：

<div>
    <form method="POST">
        <select id="dropdown" name="genre">
            <option value="nothing">Select a genre</option>
            <option value="rock">Rock</option>
        </select>
        <br/>
        <br/>
        <input id="submit" type="submit"/>
     </form>
</div>

javascript似乎不起作用，因为即使我在选择＆＃34;选择一种类型时提交表单＆＃34;选项，我的表单仍然提交，并且python代码确实可以处理值＆＃39; nothing＆＃39;，这会产生错误。

编辑：通过添加更多javascript代码向我的项目添加更多功能后，javascript代码再次无法正常工作。我使用谷歌浏览器的开发人员工具，并偶然发现了这个错误，这似乎与代码无法正常工作有关：

Uncaught TypeError: $(...).addEventListener is not a function
    at (index):18

Answer 1

尝试event.preventDefault()：

＆＃13;

var menu = document.getElementById("submit");
menu.addEventListener("click", function(event) {
  if (document.getElementById("dropdown").value == 'nothing')
  {
      event.preventDefault();
  }
});

＆＃13;

<div>
    <form method="POST">
        <select id="dropdown" name="genre">
            <option value="nothing">Select a genre</option>
            <option value="rock">Rock</option>
        </select>
        <br/>
        <br/>
        <input id="submit" type="submit"/>
     </form>
</div>

＆＃13;

Answer 2

如果您不绑定$( document ).ready()或将其设为self-invoking function，则只是代码声明。

第一个解决方案：



    $( document ).ready(functino(){
        var menu = document.getElementById("submit");
            menu.addEventListener("click", function() {
                if (document.getElementById("dropdown").value == 'nothing')
                {
                    return false;
                }
            });
    });

另一种解决方案：

(function(){
var menu = document.getElementById("submit");
        menu.addEventListener("click", function() {
            if (document.getElementById("dropdown").value == 'nothing')
            {
                return false;
            }
        });
}());

Javascript代码不执行？

2 个答案: