一个可以输入的下拉框

最新推荐文章于 2023-08-31 10:10:18 发布

El_Nino

最新推荐文章于 2023-08-31 10:10:18 发布

阅读量2.8k

点赞数

分类专栏：工作心得文章标签： function import 测试 iterator javascript button

本文链接：https://blog.csdn.net/El_Nino/article/details/886277

版权

工作心得专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<%@ 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 οnlοad="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;" οnkeyup="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)" οnchange="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>

El_Nino

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个可以输入的下拉框

测试页var TempArr=[];//用于存储下拉框选项的数组/** * 函数：function Init() * 初始化下拉框选项 */function Init(){ var SelectObj=document.SelectForm.elements["selectInput"]; with(SelectObj){ for(i=0;i TempArr[i]
复制链接

扫一扫