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

爱被打了一巴掌 2022-06-04 03:39 210阅读 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 条评论，210人围观）

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

相关阅读

相关 Unity 编辑器拓展动态下拉列表

//表现 ![2020061518302923.gif][] //编辑器扩展脚本放到Editor下 using System.Collections;

约定不等于承诺〃/ 2023年02月18日 03:16/ 0 赞/ 17 阅读

相关 Layui 动态下拉列表回显

HTMl代码 <div class="layui-form-item"> <label class="layui-form-lab

Love The Way You Lie/ 2022年10月31日 00:49/ 0 赞/ 30 阅读

相关 ajax动态更新下拉列表

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

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

相关纯CSS实现下拉列表

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

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

相关 Ajax动态下拉列表

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

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

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

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

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

相关 jquery的ajax动态下拉列表

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

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

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

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

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

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

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

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

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

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

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