본문 바로가기
웹 프로그래밍

[제이쿼리] 제이쿼리로 HTML상 select 추가

by Ratataca 2023. 6. 13.
<!DOCTYPE html>
<html>
<head>
  <title>동적으로 select 태그 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">
    <button id="addSelect">Select 태그 추가</button>
  </div>

  <script>
    $(document).ready(function() {
      var selectCounter = 1;

      $("#addSelect").click(function() {
        var selectElement = $("<select></select>", { id: "select" + selectCounter });
        selectElement.append("<option value='option1'>Option 1</option>");
        selectElement.append("<option value='option2'>Option 2</option>");
        selectElement.append("<option value='option3'>Option 3</option>");

        $("#container").append(selectElement);

        selectCounter++;
      });
    });
  </script>
</body>
</html>

댓글