input覆蓋select實現可輸入下拉框
阿新 • • 發佈：2019-02-17
<%@ 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" onchange="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>
<%
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" onchange="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屬性來代替，具體的需要自己去除錯