jsp中弹出窗口显示下拉框,将下拉框的值传入到另外一个页面

功能需求:在jsp首页上是有3个查询条件,其中一个查询条件需要弹出窗口来选择值,然后将值写入到首页的文本框内。

首先,首页如下图:
这里写图片描述
点击整车编码超链接,弹出窗口。如下图:
这里写图片描述
点击选中按钮,将值传到首页的整车编码文本框内。如下图:
这里写图片描述

这个地方重点在于怎么将弹出框的值传入到首页的文本框内。

以下为点击选中按钮。执行的函数代码:

首先,你需要在jsp页面内调用接口获取到集合数据。可以使用JavaScript的Ajax技术来实现异步请求接口数据。 接下来,你需要将集合数据填充到可搜索下拉框中。可以使用JavaScript库或框架来实现这个功能,比如jQuery、Bootstrap-select等。 以下是一个简单的示例代码: 1. 引入jQuery和Bootstrap-select库 ```html <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/js/bootstrap-select.min.js"></script> </head> ``` 2. 在页面加载完成后,调用接口获取集合数据,并将数据填充到下拉框中 ```html <body> <select id="my-select" class="selectpicker" data-live-search="true"> <option value="">请选择</option> </select> <script> $(document).ready(function() { // 调用接口获取集合数据 $.ajax({ url: 'your-api-url', type: 'GET', dataType: 'json', success: function(data) { // 将集合数据填充到下拉框中 $.each(data, function(index, item) { $('#my-select').append('<option value="' + item.value + '">' + item.label + '</option>'); }); // 初始化下拉框 $('#my-select').selectpicker({ // 可根据需要配置下拉框样式、搜索框等属性 }); } }); }); </script> </body> ``` 在上面的示例中,我们使用了Bootstrap-select库来实现可搜索下拉框的功能。其中,data-live-search="true"属性表示开启搜索框;selectpicker()方法用于初始化下拉框,你可以根据需要配置下拉框的样式、搜索框等属性。 需要注意的是,你需要根据接口返回的数据格式来修改代码中的数据解析方式和填充方式。同时,你需要根据具体业务需要对下拉框的样式和属性进行配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值