Question

我正在使用JSP创建应用程序。在其中一个页面中，用户需要输入一些症状。现在我想给一个按钮。当用户单击此按钮时，将创建一个新的选择框。

我搜索了很多，只能找到如何动态添加选项以供选择，但我想要新的选择框

有人请帮忙。

Answer 1

以下是示例代码：

<html>
  <head>
    <script type="text/javascript">
        function addSelectBox ()
        {
            var parentDiv = document.getElementById ("main");
            var selectElement = document.createElement ("select");
            for (var i=0;i < 5;i++)
            {
                var option = new Option ("Text " + i, "Value" + i);
                selectElement.options[selectElement.options.length] = option;
            }
            parentDiv.appendChild (selectElement);
        }
    </script>
  </head>
  <body>
    <div id="main">
        <input type="button" onclick="addSelectBox ()" name="clickme" value="Add Select Box" />
    </div>
  </body>
</html>

修改

对于JSP（如果您在ArrayList中有选项）：

<html> <head> <% int totalElements = 5; ArrayList r = new ArrayList (totalElements); for (int i=1;i <= totalElements;i++) { r.add (String.valueOf (i)); } %> <script type="text/javascript"> function addSelectBox () { var parentDiv = document.getElementById ("main"); var selectElement = document.createElement ("select"); var option; <% for (int i=0;i <= r.size();i++) { %> option = new Option ('<%=r.get (i)%>', '<%=r.get (i)%>'); selectElement.options[selectElement.options.length] = option; <% } %> parentDiv.appendChild (selectElement); } </script> </head> <body> <div id="main"> <input type="button" onclick="addSelectBox ()" name="clickme" value="Add Select Box" /> </div> </body> </html>

Answer 2

$(".your-button").click(function() {
    var selectBoxHtml = ["<select>"];
    var sourceItems = [4,5,6];
    for (var sourceIndex = 0; sourceIndex < sourceItems.length; sourceIndex++) {
        selectBoxHtml.push('<option value="' + sourceIndex + '">' + sourceItems[sourceIndex] + '</option');
    }
    $(this).after(selectBoxHtml.join("") + "</select>");
});

一旦sourceItems是动态的，一定要逃避它。

动态添加选择框

2 个答案: