0

JSPを使用してアプリケーションを作成しています。ページの 1 つで、ユーザーはいくつかの症状を入力する必要があります。今、私はボタンを与えたいです。ユーザーがこのボタンをクリックすると、新しい選択ボックスが作成されます。

私はたくさん検索しましたが、選択するオプションを動的に追加する方法しか見つけることができませんが、新しい選択ボックスが必要です

誰か助けてください。

4

2 に答える 2

2

サンプルコードは次のとおりです。

<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>
于 2013-03-20T17:22:44.150 に答える
0 
$(".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 が動的になったら、必ずエスケープしてください。

于 2013-03-20T17:13:53.980 に答える