此代码中动态生成选择框有什么问题

Whats Wrong in this Code to generate SelectBoxes Dynamically?

本文关键字：什么 问题 选择 代码 动态      更新时间：2023-09-26
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>
function myf() {
alert("coming dude");
var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');
var s = $("<select id='"selectId'" name='"selectName'" />");
for(var val in data) {
    $("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");
}
</script>

</head>
<body >
<form  id="msj_form" >
<button id="add" value="add" onclick="myf()">ADD</button>

</form>
</body>
</html>

单击添加按钮时，selbox 正在生成，但它立即消失。我的代码出了什么问题

单击添加按钮时，selbox 正在生成，但它立即消失。我的代码出了什么问题

因为在调用函数后，表单被提交，所以你需要做的是阻止表单提交。

试试这个：

<html>
<head>
</head>
<body>
  <form  id="msj_form" >
    <button id="add" value="add">ADD</button>
  </form>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script>
    function myf(e) {
      e.preventDefault(); // <-- make sure to add this
      alert("coming dude");
      var numbersString = "1,2,3,4,5,6";
      var data = numbersString.split(',');
      var s = $("<select id='"selectId'" name='"selectName'" />");
      for(var val in data) {
        $("<option />", {value: val, text: data[val]}).appendTo(s);
      }
      s.appendTo("#msj_form");
    }
    $('#add').on('click',myf);
  </script>
</body>
</html>

如果您想了解有关preventDefault()的更多信息，请参阅此处 - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

问题是你的表单是默认提交的，所以为了防止这种情况，只需使用 preventDefault（） 方法。这是我的解决方案。希望对您有所帮助！

function myf() {
alert("coming dude");
var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');
var s = $("<select id='"selectId'" name='"selectName'" />");
for(var val in data) {
    $("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");
}
$(document).ready(function(){
$("#msj_form").submit(function(event){
  event.preventDefault();
  myf();
  
});
});
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<form  id="msj_form" >
<button id="add" value="add" >ADD</button>
</form>

相关文章：