来自数组nodejs的下拉列表

Question

我想创建一个使 appair 成为下拉列表的按钮。此下拉列表的内容通过我的数据库中的数组传递到我的 EJS。

这是我到目前为止得到的：

EJS :

  <form class="" action="/post" method="post">


// some inputs here

<div class="container">
  <p>Select a related list of keywords :</p>
  <div class="container1">
    <button class="add_form_field1">keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
</div>
</div class="container">
  <button type="submit">Submit</button>
</form>

// some more code not relevant here, and my script for the magic to (not) append :

<script>
$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field1");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div>  <select name="role">          <% if(typeof keywords == 'object' && 
keywords.length > 0){ %><% for(var j = 0; j < keywords.length; j++) {%><option 
value='keywords[j]'>keywords[j]</option>  <% } %> <% } %> </>select>  <a href="#" 
class="delete">Delete</a></div>'); //add selectbox
    } else {
      alert('You Reached the limits')
    }
  });
  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
  });
  </script>

这是我的应用程序相关代码：

app.get('/post', isLoggedIn, (req, res) =>{

db.collection('keywords').find().toArray()
.then(results => {
res.render('test.ejs', {keywords:results})
})
.catch(error => console.error(error))
})

主要问题是 container1 中的按钮直接“发布”表单而没有执行任何与脚本相关的操作。

有人可以帮忙吗？ :)

编辑：将 div class"container1" 的内容更改为：

div class="container1">
    <select name="keyword[]"><% for(var j = 0; j < keywords.length; j++) {%><option value='<%=keywords[j]._id%>'><%=keywords[j].keyword%></option>  <% } %> </select>
    <button type="button" role="button" class="add_form_field1">Add keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>

第一个下拉列表的显示部分就像一个魅力，提交按钮（正确的那个）也是如此，但仍然面临应该让更多下拉列表出现的按钮的问题..

解决方案：

感谢@Kinglish 脚本：

 <script>
    $(document).ready(function() {
      var max_fields = 10;
      var wrapper = $(".container1");
      var add_button = $(".add_form_field1");

      var x = 1;
      (add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
          x++;
          wrapper.append('<div>  <select name="keyword[]"> <% for(var j = 0; j < keywords.length; j++) {%><option value=<%=keywords[j]._id%>><%=keywords[j].keyword%></option>  <% } %> </select>  <a href="#" class="delete">Delete</a></div>');
        } else {
          alert('You Reached the limits')
        }
      });
      wrapper.on("click", ".delete", function(e) {
        $(this).parent('div').remove();
        x--;
      })
    });
  </script>

EJS:

<div class="container">
  <p>Select a related list of keywords :</p>
  <div class="container1">
    <button type="button" role="button" class="add_form_field1">Add keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
</div>

Answer 1

在表单中，所有按钮都被视为提交按钮。

你必须以某种方式告诉表单这不是我的提交按钮。

如果 type 不起作用，您必须在按钮标签中添加 type="button" 添加角色=“按钮”

希望有用！！

Answer 2

有很多导致 JS 错误的小拼写错误，导致代码无法执行并导致表单提交。请查看以下内容并从中更新您的代码。我删除了 asp 循环，因此可以对其进行测试，但您可以轻松地将其放回

// some more code not relevant here, and my script for the magic to (not) append :

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field1");

  var x = 1;
  add_button.click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      wrapper.append('<div><select name="role"><option>test</option></select><a href="#" class="delete">Delete</a></div>'); //add selectbox
    } else {
      alert('You Reached the limits')
    }
  });
  wrapper.on("click", ".delete", function(e) {
    $(this).parent('div').remove();
    x--;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="/post" method="post">

  <div class="container">
    <p>Select a related list of keywords :</p>
    <div class="container1">
      <button class="add_form_field1">keywords &nbsp;
    <span style="font-size:16px; font-weight:bold;"> + </span>
    </button>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

来自数组nodejs的下拉列表

Droplist from array nodejs

javascript

select

ejs

node.js