<%@ page contentType="text/html; charset=gb2312" language="java" import="java.lang.String" %>
<%@ page import = "java.util.*"%>
<%@page import="com.gxsf.entity.cache.*"%>
<jsp:useBean id="cacheSearch" class="com.gxsf.pub.CacheSearch" scope="page"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试页</title>
</head>
<script language="javascript">
var TempArr=[];//用于存储下拉框选项的数组
/**
* 函数:function Init()
* 初始化下拉框选项
*/
function Init(){
var SelectObj=document.SelectForm.elements["selectInput"];
with(SelectObj){
for(i=0;i<length;i++){
TempArr[i]=[options[i].text,options[i].value];
}
}
}
/**
* 函数:function SelectTip(flag)
* flag=1时,初始化下拉框选项
* flag=1时,过滤掉不是以输入内容开头的选项
* 当输入的内容为空(即:"")时,重新初始化下拉框选项
*/
function SelectTip(flag){//必须的,过滤掉不是以输入内容开头的选项
var TxtObj=document.SelectForm.elements["txtInput"];
var SelectObj=document.getElementById("selectInput");
var Arr=[];
with(SelectObj){
var SelectHTML=innerHTML.match(/<[^>]*>/)[0];
if(TxtObj.value != "" && flag != 1) Arr[0]="<option value='n' selected></option>";
for(i=0;i<TempArr.length;i++){
if(TempArr[i][0].indexOf(TxtObj.value)==0||flag==1){
Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>";
}
}
innerHTML=SelectHTML+Arr.join()+"</SELECT>";
}
}
/**
* 函数:function pressKey()
* 过滤Enter
*/
function pressKey(){
if(event.keyCode == 13){
event.keyCode = '';
return;
}
}
/**
* 函数:function checkTest()
* 测试时用的
*/
function checkTest(){
if(event.keyCode == 13){
return;
}
if(document.SelectForm.selectInput.value == "n"){
alert("请选择...!");
document.SelectForm.selectInput.focus();
return;
}
document.SelectForm.submit();
}
</script>
<%
String selectInput = (null == request.getParameter("selectInput"))?"n":request.getParameter("selectInput");//获取提交的参数
out.print(selectInput);//测试用的
%>
<body onload="Init()"><!--初始化下拉框-->
<form name="SelectForm" method="post">
<table>
<tr><td><input type="button" value="提 交" onClick="checkTest()"><!--测试用的--></td></tr>
<tr>
<td><!--以下基本属性要保留,部分参数值可修改-->
<div style="position:absolute;">
<input name="txtInput" onKeyPress="pressKey();" style="position:absolute;top:30px; width: 150px; height:21px; left:0px;" onkeyup="SelectTip(0);" onMouseUp="txtInput.value='';SelectTip(0);">
<span id="selectInput">
<select name="selectInput" style="position:absolute;top:30px;width:150px;height:20px;left:0px; clip: rect(0 180 132 132)" onchange="txtInput.value=options[selectedIndex].text;">
<option value="n" selected></option>
<%
//用班级作为测试数据
Iterator SelectIterator = cacheSearch.getClassNum();
ClassNumEnt classNumEnt = new ClassNumEnt();
while(SelectIterator.hasNext()){
classNumEnt =(ClassNumEnt)SelectIterator.next();
%>
<option value="<%=classNumEnt.getFClassNum()%>" <%if(classNumEnt.getFClassNum().equals(selectInput)) out.print("selected");%>><%=classNumEnt.getFClassName()%></option>
<%
}
%>
</select>
<script language="javascript">//设置输入框初始值,以同步于下拉框
document.SelectForm.txtInput.value=document.SelectForm.selectInput.options[document.SelectForm.selectInput.selectedIndex].text;
</script>
</span>
</div>
</td>
</tr>
</table>
</form>
</body>
分享到:
相关推荐
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...
可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框 可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框
这是一个可以输入的下拉框组件,同时支持按首字检索功能
js 可输入 下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框
简单javavscript实现的可输入下拉框(仿VC的comobox),用于html网页开发。 不懂代码的,可直接在页面中插入该源码实现,方便易用。
可输入下拉框(select)源代码 可输入下拉框(select)源代码 select下拉框中可输入内容
支持手动输入的下拉框
C# winform datagridview 里的下拉框中 既可以从下拉框里选择数据,也可以让客户自己手动往里输入数据,
将CheckBox Text两个空间结合,简易的制作可输入下拉框
jquery+bootstrap提供可输入的下拉框,自己系统中用的感觉还可以
类似百度搜索框,可以输入的下拉框,输入信息后能自动匹配数据库里的数据,如果数据库里有马上都能显示出啦,用下拉选择马上可以选择。带数据库功能。本代码通过网友的代码改编整合。
下拉框和文本框组合共用-可以输入的下拉框ok
下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。
可以输入的下拉框(可用于项目的)
可以输入的下拉框
可输入下拉框,在IE 中没问题,在chrom中有点小问题。
可输入的下拉框 可以用来做模糊查询 可输入的下拉框 可以用来做模糊查询
一个可以输入值的下拉框 通过css样式来实现的
jquery实现百度搜索关键字输入下拉框提示,非常有效果,本人亲测超级好用
网页中的下拉框可以输入选择