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

爱被打了一巴掌 2022-06-04 03:39 182阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

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

相关阅读

相关 Excel下拉列表

-------------------- 写在前面鉴于微信公众号的码字体验太不友好了,个人十分不适应,所以这次改用CSDN博客试试 -----------------

素颜马尾好姑娘i/ 2023年06月09日 10:14/ 0 赞/ 54 阅读

相关 ajax动态更新下拉列表

前面做了[一个ajax的小demo][ajax_demo]，今天看一个动态更新下拉列表，或者也叫级联更新下拉列表，这个也是利用ajax的异步调用去后台实

- 日理万妓/ 2022年08月05日 14:28/ 0 赞/ 183 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 283 阅读

相关 Ajax动态为下拉列表添加数据

1. 前台jsp，新建一个下拉控件 <select id="seldvd" onChange="sel_onchange(this)"></select> 2

野性酷女/ 2022年07月11日 09:25/ 0 赞/ 189 阅读

相关 Ajax动态下拉列表

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

妖狐艹你老母/ 2022年06月07日 06:17/ 0 赞/ 173 阅读

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

代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco

爱被打了一巴掌/ 2022年06月04日 03:39/ 0 赞/ 183 阅读

相关 jquery的ajax动态下拉列表

后台是返回一个json字符串前台用ajax接收然后把data拼接成select下拉列表 script <script type="text/javascri

电玩女神/ 2022年06月04日 03:37/ 0 赞/ 222 阅读

相关动态生成下拉列表（JQuery、EasyUI）

一、原生的select标签： <%@ page language="java" contentType="text/html; charset=UTF-8"

素颜马尾好姑娘i/ 2021年11月22日 12:40/ 0 赞/ 362 阅读

相关下拉列表前端实现步骤

一组件脚本 Info.vue组件中引入teacher api import teacherApi from '@/api/teacher' 定义data

电玩女神/ 2021年07月25日 02:33/ 0 赞/ 556 阅读

相关下拉列表多级联动前端实现

一获取一级分类 1 组件数据定义添加在Info.vue的data中 subjectList: [], // 一级分类 subjec

川长思鸟来/ 2021年07月24日 19:04/ 0 赞/ 566 阅读