input覆盖select实现可输入下拉框

港控/mmm° 2022-06-10 04:52 218阅读 0赞

<%@ page language="java" import="java.util.\*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<HTML>  
<HEAD>  
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>  
<TITLE>js实现可输入的下拉框</TITLE>  
**<style type="text/css">  
div\{  
display:inline;  
\}  
</style>**  
</HEAD>  
<BODY>  
<p>  
<div><label>试试：</label></div>  
<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="德国">德国</option>  
<option value="挪威">挪威</option>  
<option value="瑞士"> 瑞士</option>  
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">  
</div>  
</p>  
</BODY>

</HTML>

注：有时margin在一些浏览器中不起作用，则可用padding属性来代替，具体的需要自己去调试

发表评论取消回复

表情：

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

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

相关阅读

相关可下拉可输入的输入框实现方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2023年01月08日 02:10/ 0 赞/ 306 阅读

相关使用select2实现多选select下拉框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="re

àì夳堔傛蜴生んèń/ 2022年06月17日 05:46/ 0 赞/ 464 阅读

相关 input覆盖select实现可输入下拉框

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

港控/mmm°/ 2022年06月10日 04:52/ 0 赞/ 219 阅读

相关 select2的输入可下拉（modal框）--gxy

html： <div class="form-group col-md-6 spanBox">

- 日理万妓/ 2022年06月02日 00:52/ 0 赞/ 525 阅读

相关下拉框（可输入+自动匹配）--gxy

地址来源： [https://www.cnblogs.com/brandonhulala/p/5990482.html][https_www.cnblogs.com_bra

川长思鸟来/ 2022年06月02日 00:19/ 0 赞/ 218 阅读

相关 input输入框、select下拉框在安卓与ios上的兼容性问题

一、input输入框在平常做移动端项目时，如果不注意的话，在ios系统上经常会出现这种问题，点击输入框，输入框获取焦点，此时苹果手机页面会自动放大，而安卓

港控/mmm°/ 2022年05月30日 20:12/ 0 赞/ 503 阅读

相关用input做的下拉框，可编辑的下拉框

<input type="text" list="itemlist" name=""> <datalist id="itemlist"> <option>item1</op

傷城~/ 2022年05月22日 05:13/ 0 赞/ 271 阅读

相关 select下拉框笔记

以前记得select很溜的，好久没写前端都忘完了，把以前的代码又看了下，得做笔记啊一 2018-09-08 09:11:40 select里面应当填充List<

╰+哭是因爲堅強的太久メ/ 2022年04月16日 04:40/ 0 赞/ 358 阅读

相关 <select>下拉选择框

下拉选择框示例: <select id="DropDownList\_use" class="txt" onchange="selectSort(this.value

布满荆棘的人生/ 2021年10月23日 08:41/ 0 赞/ 539 阅读

相关 HTML实现可编辑下拉框

前言在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能思想：通过绝对定位实现input覆盖Select

墨蓝/ 2021年09月14日 14:30/ 0 赞/ 1018 阅读