JSP 根據輸入內容匹配下拉框選項

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ page contentType="text/html; charset=gb2312" %>
<HTML>
<HEAD>
<TITLE>可根據輸入匹配選項</TITLE>
</HEAD>
<Script Language="JavaScript">
<!--
   var whichText;
    function selectStation(obj) {
   var objSelStation = obj;
        if (obj.selectedIndex != -1) {
            var stationName = obj.options[obj.selectedIndex].text;
            whichText.value = stationName;
        }
        showDivStation(this, false,'selStation')//按一下滑鼠某一選項選定後關閉下拉框
    }

//響應text的事件
   var pageD =0, pageU;
    function similarFind(txtObj,seledName) {
        var curStationName = txtObj.value;
        var objSelStation = eval("document.myform."+seledName);//根據實際的form name修改
        var stationLength = objSelStation.options.length;
   pageU = pageD;

//匹配用text中的資料跟下拉框中的資料
        for (var i=0; i<stationLength; i++) {
            var stationName = objSelStation.options[i].text;
            var re = new RegExp("^" + curStationName);
       if (stationName.match(re)) {
                if (i<stationLength - 10) {
                    objSelStation.selectedIndex = i + 10;
                }
                objSelStation.selectedIndex = i;
       pageD = i;
       pageU = i;
                break;
            }
        }
//響應下移鍵
   if(event.keyCode==40) {
     pageD++;
     if(pageD==objSelStation.options.length) pageD=0;
     txtObj.value=objSelStation.options[pageD].text ;
     objSelStation.selectedIndex = pageD;
   }
//響應上移鍵
   if(event.keyCode==38) {
     --pageU;
     if(pageU<0) pageU=objSelStation.options.length-1;
     txtObj.value = objSelStation.options[pageU].text;
     objSelStation.selectedIndex = pageU;
    }
}
//下拉框顯示位置
    function showDivStation(obj, b,selName) {
        var divStation = eval("document.myform."+selName);//根據實際的form name修改
        if (b) {
            whichText = obj;
            divStation.style.top = 20;
            divStation.style.left = 0;
            divStation.style.display="block";
            similarFind(obj,selName);
        } else {
            divStation.style.display="none";
        }
    }
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="myform" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
     <td width="6%" valign="top">城市</TD>
     <td width="94%" bgcolor="#FFFFFF">
    
    <input type="text" size="70" name="put" style="width:120" onfocus="showDivStation(this, true,'selStation')" onkeyup="similarFind(this,'selStation')" value="">
    
    <select name="selStation" size="6" style="display:none;width:120;" onclick="selectStation(this)">
      <option value="BJ" >北京</option>
      <option value="SD" >山東</option>
      <option value="SX" >山西</option>
      <option value="HEB" >河北</option>
      <option value="HEN" >河南</option>
      <option value="HUB" >湖北</option>
      <option value="HUN" >湖南</option>
      <option value="GD" >廣東</option>
      <option value="GX" >廣西</option>
    </select>
   </td>
</table>
</form>
</BODY>
</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More