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

最新推荐文章于 2024-07-29 12:13:58 发布

Mint6

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/mint6/article/details/78702718

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<base href="<%=basePath%>">
<html>
<head>
<title>前台动态下拉列表添加</title>

<script type="text/javascript">  
        function addHouse(){
            var obj = document.getElementById("house");  
            var option = document.createElement("option");//创建option节点  
            option.innerText = obj.value;  
            var parantCity = document.getElementById("houseName");//找到select子节点  
            parantCity.appendChild(option);  
        }  
    </script>
</head>
<body>
    <input type="button" value="增加房屋" οnclick="addHouse()" />
    <label>请输入增加的房屋：</label>
    <input type="text" id="house" />
    <select id="houseName">
    </select>
</body>
</html>