纯前端代码动态增加下拉列表

爱被打了一巴掌 2022-06-04 03:39 263阅读 0赞

代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%
  4.     String path = request.getContextPath();
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  6.             + path + "/";
  7. %>
  9. <base href="<%=basePath%>">
  10. <html>
  11. <head>
  12. <title>前台动态下拉列表添加</title>
  14. <script type="text/javascript">  
  15.         function addHouse(){
  16.             var obj = document.getElementById("house");  
  17.             var option = document.createElement("option");//创建option节点  
  18.             option.innerText = obj.value;  
  19.             var parantCity = document.getElementById("houseName");//找到select子节点  
  20.             parantCity.appendChild(option);  
  21.         }  
  22.     </script>
  23. </head>
  24. <body>
  25.     <input type="button" value="增加房屋" οnclick="addHouse()" />
  26.     <label>请输入增加的房屋：</label>
  27.     <input type="text" id="house" />
  28.     <select id="houseName">
  29.     </select>
  30. </body>
  31. </html>

发表评论

表情：
评论列表 （有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Ajax动态下拉列表

    　许多页面上都涉及有下拉框，即select标签。对于简单的下拉框，被选择的数据是不需要改变的，我们可以用写死。这样下拉框的数据永远都是那几条。 　　示例： 1 <s

    妖狐艹你老母妖狐艹你老母/ 0 赞/ 248 阅读