一个可以输入的下拉框

El_Nino

浏览: 205086 次
性别:
来自: 深圳

最近访客更多访客>>

kaige9at

mgf614

ycabbage

50050192

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<%@ 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>

/**
* 函数：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>