JS写的:既可以输入又可以选择的selected

最新推荐文章于 2021-06-03 15:22:15 发布

snowme103

最新推荐文章于 2021-06-03 15:22:15 发布

阅读量241

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/snowme103/article/details/83845424

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<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;
        }
    }

 //响应text的事件
 var pageD =0, pageU;
    function similarFind(txtObj,seledName) {
        var curStationName = txtObj.value;
        var objSelStation  = eval("document.browser."+seledName);
        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.browser."+selName);
        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="browser" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <TD width="6%" valign="top">POSTCODE </TD>
     <TD width="94%" bgcolor="#FFFFFF"> 
  <input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true,'selStation')" onblur="showDivStation(this, false,'selStation')" onkeyup="similarFind(this,'selStation')" value=""> 
  <select name="selStation" size="5" style="display:none;width:120; background-color:#CCCC99" onclick="selectStation(this)" onkeyup="selectStation(this)">
   <option value="1" >aaa</option>
   <option value="2" >aab</option>
   <option value="3" >aac</option>
   <option value="4" >aba</option>
   <option value="5" >abb</option>
   <option value="6" >abc</option>
   <option value="7" >baa</option>
   <option value="8" >bab</option>
   <option value="9" >bac</option>
   <option value="10" >caa</option>
   <option value="11" >cab</option>
   <option value="12" >cac</option>
  </select>
 </td>
</table>
</form>
</BODY>
</HTML>