问题：如何使用js动态生成html页面的下拉列表？

最新推荐文章于 2024-04-28 13:37:45 发布
最新推荐文章于 2024-04-28 13:37:45 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： 前端js+html 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nurture_/article/details/121688993
版权

背景:在没有使用各种组件的情况下，希望拿后端响应的集合在前端的表单页面动态展示一个下拉列表

实现：三步走 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js生成下拉列表</title>
    <script type="text/javascript" src="/jquery.js"></script>  <!--踩坑：你的js在static目录下放的，一定要加/不然console控制台报错-->
    <script>
        //页面加载完成之后
        $(function(){
            //第二步：发送ajax请求获取后端的集合数据
            $.ajax({
                type : "GET",
                url : "/api/subject/getAllSubject",
                async : false,//看你自己的需要，false代表不让他异步执行
                success:function(data){
                    console.log(data)
                    //第三步：动态创建下拉列表
                    let titleOptionHtml = "<option value = \"\">请选择科目：</option>"
                    $("#sh
最低0.47元/天 解锁文章
一叶知宁Max
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
我的js动态生成下拉列表框
observething的专栏
09-08 798
[code="java"] var arrayNation = new Array('汉族','蒙古族','彝族','侗族','哈萨克族'); var arrayDegree = new Array('小学','初中','高中','中专','大专','本科','硕士','博士'); function createSelect(name, str){ var _sel...
JavaScript：动态生成下拉列表框
抛弃幻想，准备斗争
10-21 5837
范例：动态生成下拉菜单 TestDemo.htm <!DOCTYPE html> <html> <head> <title>下拉框</title> <meta charset="utf-8"> <script type="text/javascript"> var cit...
js实现简单的级联下拉列表
最新发布
weixin_51609337的博客
04-28 301
【代码】js实现简单的级联下拉列表。
html接受后端数据并动态展示【下拉框】
qq_45900905的博客
04-20 2036
res：指从后端拿到的数据，res中数据格式可以通过前端F12转换json看到。其中url：指后端接口中的路径，需要和注解路径一致。动态添加option中的选项值。
用js拼html写下拉框,js实现下拉框效果（select）
weixin_30884379的博客
06-04 646
效果图：代码如下：*{padding: 0;margin:0;}ul,li{list-style: none}.left{float: left;}.right{float: right;}.select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;}.select_item{margin-right: ...
JS实现下拉框
qq_59494319的博客
06-24 3348
JS实现下拉框
javascript为下拉列表动态添加数据项
12-12
javascript为下拉列表添加数据项.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <title>为下拉列表动态添加数据项</title> [removed] function gel(id) { return document.getElementById(id); } [removed]
js操纵dom生成下拉列表框的方法
12-09
本示例展示了如何使用JavaScript操纵DOM来动态生成一个下拉列表框，即`<select>`元素及其内部的`<option>`元素。 首先，我们看到HTML的`<body>`标签有一个`onload`属性，它指定页面加载完成后执行的函数，这里是`...
jQuery实现动态显示select下拉列表数据的方法
10-18
总之，这个示例展示了如何使用jQuery从JSON数据中动态生成select下拉列表，并根据用户的交互更新页面状态。掌握这种技术有助于创建更动态、更富交互性的网页应用。通过熟练运用jQuery，开发者可以提高开发效率，减少...
如何使用Jquery动态生成二级选项列表
10-15
在HTML部分，我们定义了这两个下拉列表，并在省份列表中预设了一个“请选择”的选项： ```html 请选择 请选择 ``` 接下来，我们需要引入jQuery库。在HTML的`<head>`标签内，我们可以链接到jQuery的CDN（内容...
bonsai_list:盆景使用下拉列表示例
05-24
本案例“bonsai_list:盆景使用下拉列表示例”主要展示了如何利用JavaScript处理JSON数据并构建可交互的下拉列表，这对于用户界面的动态展示和数据操作非常有用。 首先，我们来理解“盆景（Bonsai）”。在这里，它...
HTML可输可选下拉框实现的JavaScript脚本
05-25
NULL 博文链接：https://jiangzhengjun.iteye.com/blog/455171
AngularJS使用ngOption实现下拉列表的实例代码
11-27
在AngularJS中，`ngOption`指令用于动态生成HTML下拉列表（`<select>`）。这个指令使得数据绑定变得非常方便，可以轻松地将模型（`ng-model`）与列表选项（`ng-options`）关联起来。让我们深入探讨`ngOption`的用法...
html 级联动态下拉框,JS(JQuery)实现动态三级级联下拉列表效果
weixin_36123285的博客
06-03 618
实现效果数据结构样式，采用json格式HTML结构仓库名称：请选择仓库专业名称：请选择专业项目名称：请选择项目效果一：需要手动一级一级点开var data_select = [];//获取级联需要的json数据$.ajax({type: "post",url: "/admin/AdminHandler.ashx",data: { "operation": "GetCKZYXMList" },suc...
html----js控制下拉框（详解
1900的博客
06-27 2421
效果： html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link rel="stylesheet" href="css.css">...
原生JS实现下拉菜单操作
qq_64469057的博客
12-21 2421
原生js
html+js完成下拉框（SpringBoot+半完成项目）
weixin_54348877的博客
06-20 582
需求：点击经营状态，可以出现多个选项的下拉框 ，而不是自己输入原代码：web.resoures.temtes.对应包.对应类修改后：使用select标签，设置默认状态，不加selected默认是第一个，加两个默认是最后一个内选项用option。 更新后：不更新时，update直接使用和add一样的代码，会有一个问题，就是每次点修改，默认的选项是我们selected的，而不是沿用该数据存储的选项。使用if标签，如果得到的选项是哪个，就回显哪个，名称要一样...
js动态生成级联下拉列表
LHB的博客
02-21 1353
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>级联选择器练习</title> <script> window.onload = function(){ var ojson=[{'province':'河北省','city':['石家庄','石家
html搜索框下拉怎么做,js实现带搜索功能的下拉框
weixin_39848097的博客
06-03 2318
本文实例为大家分享了js实现带搜索功能的下拉框，供大家参考，具体内容如下1、介绍在实现下拉框的时候，如果用select+option可以在满足pc端的需求，但如果需应用到手机端，由于select的样式太丑。所以接下来利用div+p实现到输入文本的下拉框2、思路1 利用一个input充当搜索框，div+p充当下拉框放置于input的下方。如图所示：2 接下来就是js的实现了，我们先把红色区域的div...
layui treegrid 输入框动态生成下拉列表
07-27
要在 layui treegrid 中实现输入框动态生成下拉列表，您可以使用 layui 的 form 模块来实现。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui TreeGrid</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.css"> </head> <body> <table class="layui-table" id="treeTable"></table> <script src="https://cdn.staticfile.org/layui/2.5.4/layui.js"></script> <script> layui.use(['tree', 'table', 'form'], function(){ var tree = layui.tree; var table = layui.table; var form = layui.form; // 模拟数据 var data = [ {id: 1, name: '节点1'}, {id: 2, name: '节点2'}, {id: 3, name: '节点3'}, {id: 4, name: '节点4'} ]; // 渲染树形表格 tree.render({ elem: '#treeTable', data: data, showLine: true, cols: [[ {field: 'name', title: '名称', templet: '#nameTpl'} ]] }); // 渲染下拉列表 var selectHtml = ''; for(var i=0; i<data.length; i++){ selectHtml += '<option value="'+ data[i].id +'">'+ data[i].name +'</option>'; } document.querySelector('#selectContainer').innerHTML = selectHtml; // 监听下拉列表变化 form.on('select(select)', function(data){ console.log(data.value); }); }); </script> <!-- 模板 --> <script type="text/html" id="nameTpl"> <select lay-filter="select"> <option value="">请选择</option> <optgroup label="节点列表" id="selectContainer"></optgroup> </select> </script> </body> </html> ``` 在上面的示例代码中，我们使用了 layui 的 form 模块来渲染下拉列表，并使用了 lay-filter 属性来监听下拉列表的变化。通过遍历数据来动态生成下拉列表的选项，并将选项添加到指定的容器中。在监听函数中，您可以获取下拉列表选中的值，并进行相应的处理。注意，要在页面中引入 layui 的 form 模块的 JavaScript 文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值