jsp页面可输入下拉框实现

最新推荐文章于 2024-05-11 12:12:57 发布
最新推荐文章于 2024-05-11 12:12:57 发布
阅读量1w 收藏 5
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27739989/article/details/51079501
版权
<HTML> 
<HEAD> 
<META http-equiv='Content-Type' content='text/html; charset=gb2312'> 
<TITLE>可输入的下拉框</TITLE> 
</HEAD> 
<BODY > 
<div style="position:relative;"> 
<span style="margin-left:100px;width:18px;overflow:hidden;"> 
<select style="width:118px;margin-left:-100px" οnchange="this.parentNode.nextSibling.value=this.value"> 
<option value="内容01">内容01</option> 
<option value="内容02"> 内容02</option> 
<option value="内容03"> 内容03</option> 
</select></span><input name="box" style="width:100px;position:absolute;left:0px;"> 
</div>



Zzooper
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp中对话框的实现
JarvisLau的博客
04-14 2171
弹出对话框显示Are you sure you want to do that?,选择是继续执行下边语句,选择否停止执行. 方法二: onclick="myfunc();return false"整句的意思，就是单击的时候，执行myfunc()这个函数，如果函数返回是false，则不执行下面的程序；如果返回是true，则继续执行下面的应用程序，也可以不在这里写，而在函数myfunc()里面写这
JSP页面右下角消息弹框的实现
gongye_ye的专栏
02-11 5631
JSP页面上通过JS实现消息弹出框，样式可根据要求修改，这边只是一个简单的示范例子，自定义了两条消息，弹框效果如下   JSP页面 #winpop { width:250px; height:0px; position:absolute; right:0; bottom:0; border:1px solid grey; margin:0; padding:
html（jsp）文件中input覆盖select标签实现可输入下拉框
weixin_55460511的博客
05-28 1502
需求：在前端页面（jsp文件）实现可输入下拉框 前端所需shu
可输入可选择的下拉框（input select）并且输入框获得下拉的内容
热门推荐
汪缓的博客
12-01 3万+
1、JSP代码                   请选择.... 11 22 33 2、JS方法 function setRuleContent(){        var selectValue = $('#_select option:selected').text();//选中select的内容        //alert("select
el-select下拉框 添加 el-checkbox 多选框，支持全选、取消全选
最新发布
rudy_zhou的博客
05-11 1745
基于el-select 与 el-checkbox 实现多选框全选，取消全选 交互
JSP学习之路（一）:JSP可输入下拉框编写代码
H90P0820的专栏
02-26 5843
this.parentNode.nextSibling.value：的父节点即的兄弟节点。 this.value ：去父节点中的值。 position:absolute：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠 代码：   
html 下拉列表 模糊查询,JS Select下拉框(支持输入模糊查询)
weixin_31874603的博客
06-03 641
Insert title herefunction SelectValue(obj){document.all.box2.value = obj.options[obj.selectedIndex].text;}var j = 0;function InputValue(obj){var n = 1;var tmpObj;var src = document.all.SelectOption;va...
datalist标签使用
weixin_45620465的博客
11-10 1363
datalist标签使用案例
jsp页面带有下拉框的分页
03-15
总结，实现JSP页面带有下拉框的分页功能需要结合HTML、Servlet和数据库操作。通过下拉框选择页码，Servlet处理请求，从数据库获取对应页的数据，最后在JSP页面上展示。确保代码的可维护性和性能优化，比如避免全表...
jsp要实现屏蔽退格键问题探讨
01-20
在jsp页面中，通常会包含多种输入元素，如文本框（`<input type="text">`）和下拉框（`<select>`）。当用户在文本框内输入时，使用退格键是常见的操作，用于删除已输入的文字。然而，如果用户在下拉框中按了退格键，...
ajax++jsp二级联动下拉框,无刷新分页
04-23
- `51CTO下载-ajax++jsp二级联动下拉框.txt`: 这个文本文件可能提供了实现JSP与Ajax结合的二级联动下拉框的代码示例或步骤说明。 - `51CTO下载-ajax实现无刷新查询.txt`: 文件内容可能涉及如何使用Ajax实现无刷新...
select下拉框支持搜索并可多选
04-16
在网页开发中，"select下拉框支持搜索并可多选" 是一个常见的交互功能，它极大地提高了用户体验，尤其在面对大量选项时。这个功能通常通过JavaScript库来实现，结合CSS进行样式定制，以达到美观且实用的效果。在这个...
Jsp实现日历选择框
09-06
在本文中，我们将深入探讨如何使用JSP技术来实现一个日历选择框，重点是集成My97日历控件。My97日历控件是一款功能强大的JavaScript日期选择插件，广泛应用于网页中，提供了丰富的自定义选项和良好的用户体验。 ...
[内附完整源码和文档] 基于JSP物流信息网的设计与实现
LEMFOooO的博客
09-01 711
摘 要 本文讲述了基于JSP物流信息网的设计与实现。该系统使用java语言开发，使系统具有更好的平台性和可扩展性。 该系统实现了用户登录、注册、查询快递信息、快递公司注册成为合作伙伴以及系统管理员对信息进行管理等功能。系统的主要界面会将所有的服务排列好，用户可以自行选择服务。用户可以查询快递的详细信息以及快递公司的价格以及邮递的时间。系统管理员可以查看所有的信息，甚至可以更新快递的地址。快递公司可以填写公司相关信息成为该系统的合作伙伴。 随着时代的进步，人们的生活水平日益上升，平常的消费已经无法满足人们的需
解决jsp页面下拉列表可以输入文本的问题
日拱一兵
11-14 4405
今天在jsp页面中作了一个下拉列表，写了好了里面的元素以为就这样就可以了，一个意外的操作，让我发现竟然不点击下拉别表的三角号，可以在里面输入文本，这个很郁闷，各种想办法， 最后一个简单的操作就可以了，在当前标签里面加上一个readOnly就可以了，只读，也就是不可以写。笨死了。在此做一个记录。
jsp自定义标签之select标签
Dawn.x的博客
05-28 2284
jsp自定义标签之select标签前言标签详解尾言 前言 上篇博文已经给大家介绍过自定义标签的开发步骤和优点，这篇博文主要给大家介绍一下数据标签select 这是之前开发的标签 标签详解 首先要了解select标签的内容: <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <
自定义JSP[if，foreach，数据，select]标签
全栈
06-21 565
自定义select标签（在同一个页面，放在文章的最后，名字叫index.jsp）第一步：写业务第二步：定义助手类第三步：定义tld文件第四步：使用自定义jsp标签（在同一个页面，放在文章的最后，名字叫index.jsp） 第三步：定义tld文件：tld文件的属性名是什么意思我就不在赘述了，这个也在我前面一篇文章里面讲解了。当我们tld文件定义好后就可以开始在页面上使用自定义jsp标签了...
★自己实现,可选select可输入input
u010912638的专栏
10-26 1121
★自己实现,可选select可输入input先需用jQuery的JS包,或者把jQuery的选择器用传统JS代替 这是在 jsp页面操作的 用到了 EL表达式取值js代码: --> <script> $("#a").click(function(){ $("#meinput")[0].style="display:block";//或者 "" 都可以显示...
实现jsp页面二级下拉框联动，实时读取数据库数据实现代码
04-22
好的，我会尽力回答你的问题。要实现jsp页面二级下拉框联动，需要在jsp页面中引入jQuery框架，并编写JavaScript代码来实现。下面是一个简单的示例代码： HTML代码： ``` <select id="select1"> <option value="0">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> </select> <select id="select2"> <option value="0">请选择</option> </select> ``` JavaScript代码： ``` <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { $('#select1').change(function() { var val = $(this).val(); $('#select2').empty(); $('#select2').append('<option value="0">请选择</option>'); if (val != '0') { $.ajax({ type: 'POST', url: 'getData.php', data: {id: val}, dataType: 'json', success:function(data) { for (var i = 0; i < data.length; i++) { $('#select2').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } }); }); </script> ``` 其中，getData.php是一个服务器端的接口，用来从数据库中获取数据。它的代码如下： ``` <?php $conn = mysqli_connect('localhost', 'root', 'root', 'test'); if (!$conn) { die('连接失败: ' . mysqli_error($conn)); } $id = $_POST['id']; $sql = "SELECT * FROM table2 WHERE id1 = $id"; $result = mysqli_query($conn, $sql); $data = array(); while ($row = mysqli_fetch_array($result)) { $item = array( 'id' => $row['id'], 'name' => $row['name'] ); array_push($data, $item); } echo json_encode($data); mysqli_close($conn); ?> ``` 注意，为了保证安全性，应该对输入参数进行过滤和验证。上述代码仅供参考，具体实现需要根据实际情况进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值