Question

我希望使用JS添加一个新的下拉菜单，点击按钮，下拉菜单的元素在点击时会创建一个文本框。

HTML：

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
</div>
<br />

JS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var click_number = 0;
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        var input = $("<div id='search'><label>Input &nbsp;<textarea rows='1' name='input_"+ click_number +"'><?php echo $_POST['input_". click_number ."']; ?></textarea></label></div>");
        input.appendTo('#TextBoxContainer');
        div.html(RemoveDynamicTextBox());
        $("#TextBoxContainer").append(div);
        console.log(click_number);
        click_number++;
    });
    $("body").on("click", ".remove", function () {
        for ($i=0; $i<2; $i++){
            $('#search').remove();
        }
        click_number--;
        console.log(click_number);
    });

});

function RemoveDynamicTextBox() {

    return "<input id='search' type='button' value='Remove' class='remove' />";

}

</script>

目前，上面的代码会在每次点击按钮时添加一个文本框和删除按钮。然后我使用文本框作为后变量输入，同时在带有提交按钮的表单中包含所有内容，以便我可以在mysqli查询中使用输入。我使用点击编号增加post变量的名称，以便在查询中稍后区分输入。

我是JS的新手（所以如果我没有提供足够的信息，让我知道并且我会编辑），但是我希望在下拉菜单中有很多不同的输入文本框选项，添加按钮单击。然后，当用户单击下拉菜单中的元素时，它将添加为文本框输入。因此，每次用户单击添加按钮时，都会出现一个新的下拉菜单。因此，理论上我可以有2个相同的输入，其名称中的增量不同，以后可以区分。此外，我将删除按钮删除添加的文本框和与上次“添加”按钮单击相关联的下拉菜单。

Answer 1

使用bootstrap，这将使它变得非常容易。将其复制到文本文档中，将其另存为.html并查看结果。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><label>Textbox:</label><input type="text"></input></li>

    </ul>
  </div>
</div>

</body>
</html>

使用JS添加新的下拉菜单

1 个答案: