select有text的功能

你好,谢谢你的回答,不过我要的不是那种效果,select 是可以输入内容的.

wasuka(萝莉控)你好,谢谢你的回答,不过我要的不是那种效果,select 是可以输入内容的.
也就是说,select 同时也有text的输入功能.同时会将类似输入内容的 <option>展开.

可以考虑用一个input和一个隐藏select，input使用onchange动作，传递给select的accesskey

哦，接楼上，在适当的时候（比如已经选择）再次隐藏select

http://webfx.eae.net/dhtml/combobox/combobox.htm

难道是这样?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<script>
function show()
{
//var d = document.getElementById("3");
//alert(d.value);
var a = document.getElementById("1").value;
if(a.length>=1)
{
if(a.toLowerCase()=="s"||a.toLowerCase()=="sha"||a=="上海"||a.toLowerCase()=="shanghai")
{
var select = document.getElementById("2");
for(var i=0;i<select.length;i++)
{
if(select.options.item(i).value=="SHA")
{
select.options.item(i).selected="true";
}
}
}
if(a.toLowerCase()=="p"||a.toLowerCase()=="pek"||a.toLowerCase()=="北京"||a.toLowerCase()=="beijing")
{
var select = document.getElementById("2");
for(var i=0;i<select.length;i++)
{
if(select.options.item(i).value=="PEK")
{
select.options.item(i).selected="true";
}
}
}
}

}
setInterval("show();",50);
</script> </HEAD> <BODY >
<input type="text" id="1"></input>
  <select id="2">
  <option>   </option>
<option value="PEK">Beijing 北京</option>
<option id="3" value="SHA">Shanghai 上海</option>
  </select>
</BODY>
</HTML>

dongbingbin() 谢谢你的回答,你的那个效果跟 wasuka(萝莉控)刚开始说的差不多,不是那种效果,我到网上找到类似的 ,可是还有一点不太满意.
下面是代码,可以都学习一下.======================a.js=================var m_strTextselectDiv="Textselectshow_Div"
var m_intTextSelectIn=false
var ie=(document.getElementById && document.all);for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){
m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv
}
document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')
// 获取对象的坐标
function getPosition(Obj)
{
try{
  for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent);
  return {left:sumLeft,top:sumTop}
}catch(e){}
}
//处理Div中的选项/* 某个选项，输入框的ID号 */
function divOnmoveover(obj,objText)
{
var MM_objText=document.getElementById(objText) var objChilddiv=obj.parentNode.getElementsByTagName("div")
for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''}
obj.style.cssText='background-color: #330066;color: #ffffff;' obj.onclick=function(){
  m_intTextSelectIn=false
  if(ie)
  {MM_objText.value=obj.outerText}
  else
  {MM_objText.value=obj.textContent}
  MM_objText.focus()
  MM_objText.blur()
}
}function showSelect(obj,A_seleObj)
{
var ie=(document.getElementById && document.all);
var objDiv =document.getElementById(m_strTextselectDiv)
var seleObj =document.getElementById(A_seleObj)

//循环取名，避免取了个重复的ID号
for(var IDx=0,IDy='';obj.id=='';IDx++,IDy=IDx){
  obj.id=(document.getElementById("textSelect" + IDy)==null)?"textSelect" + IDy:''
}
objDiv.style.left=getPosition(obj).left
objDiv.style.top=getPosition(obj).top+obj.offsetHeight
objDiv.style.width=obj.offsetWidth
objDiv.style.height='';
objDiv.style.overflowY='';
objDiv.innerHTML=''
//读取select的项目放到Div里。
for(var x=0;x<seleObj.options.length;x++)
{objDiv.innerHTML+="<div onmouseover=\"divOnmoveover(this,'" + obj.id + "')\" style='width:100%;white-space: nowrap;cursor: default;'>"+seleObj.options[x].text+"</div>"}
//调整Div高度，过度显示滚动条
if(x>8)
{
  objDiv.style.height=100;
  objDiv.style.overflowY='auto';
}
objDiv.style.display=''
if(ie){HideOverSels(objDiv.id)}
objDiv.onmouseover=function(){m_intTextSelectIn=true}
objDiv.onmouseout=function(){m_intTextSelectIn=false;obj.focus();}

obj.onclick=function(){showSelect(obj,A_seleObj);obj.onkeyup();}
//自动匹配选项中符合条件的记录
obj.onkeyup=function(){
  if(obj.value==''){return false}
  var objChilddiv=objDiv.getElementsByTagName("div")
  for(var x=0;x<objChilddiv.length;x++)
  {objChilddiv[x].style.cssText=''}
  for(var x=0;x<objChilddiv.length;x++)
  {
   var strChilddiv=(ie)?objChilddiv[x].outerText:obj.textContent
   if(strChilddiv.substr(0,obj.value.length)==obj.value)
   {
    objDiv.scrollTop=objChilddiv[x].offsetHeight*x
    objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;'
    return true
   }
  }
}
obj.onblur=function(){if(!m_intTextSelectIn){objDiv.style.display='none'};if(ie){HideOverSels(objDiv.id)}}
}// 隐藏被ID为objID的对象（层）遮挡的所有select
function HideOverSels(objID)
{
  var sels = document.getElementsByTagName('select');
  for (var i = 0; i < sels.length; i++)
  if (Obj1OverObj2(document.getElementById(objID), sels[i]))
sels[i].style.visibility = 'hidden';
    else
    sels[i].style.visibility = 'visible';
}//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
  obj1Left >= obj2Right || obj1Top >= obj2Bottom)
  result = false;
return result;
}
=========================================== <input type="text" name="" size="15" onfocus="javascript:showSelect(this,'StarCity')">
  <select name="StarCity" style="display: none" disabled>
    <option value="PEK">Beijing 北京</option>
     <option value="PEK">Beijing 北京</option>
      <option value="PEK">Beijing 北京</option>
       <option value="PEK">Beijing 北京</option>
        <option value="PEK">Beijing 北京</option>
         <option value="PEK">Beijing 北京</option>
    <option value="SHA">Shenghai 上海</option>
     <option value="SHA">Shanghai 上海</option>
    <option value="SHA">Shanghai 上海</option>
    <option value="SHA">Shanghai 上海</option>
    <option value="SHA">Shanghai 上海</option>
    <option value="SHA">Shanghai 上海</option>

  </select>
============================================

这个,看到的效果看起来是text的,而我要的是看起来是select的,但有text的效果.

这个只能模拟http://www.scbr.com/docs/company.shtml
这里面左里的有，你找找

mingxuan3000(铭轩) 你知道怎么从那个页面把想要的东西下下来吗?

那就是自定义控件喽，用一个input一个select来模拟。用input的onkeyup来控制，你要的那种效果。

给点分吧。。 555555555555555555555
=============================================<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="fason,阿信" name=Author>
<title>动态提示的下拉框</title>
<style>
a{color:red;text-decoration:none;font-size:12px}
</style>
</head>
<body onload="Init()">
<center>
<h2>动态提示的下拉框</h2>
<hr>
<form name=frm>
<table>
  <tr>
    <td>请输入1或2或3或4或5进行测试：<br><input name="txt" style="width:100px" onkeyup="SelectTip(0)"> <input type="button" value="reset" onclick="SelectTip(1)"></td>
  </tr>
  <tr>
    <td>
    <span id="demo"><select name="demo" style="width:100px" size=10 onchange="txt.value=options[selectedIndex].text;">
<option value="1">1</option>
<option value="12">12</option>
<option value="123">123</option>
<option value="1234">1234</option>
<option value="2">2</option>
<option value="23">23</option>
<option value="234">234</option>
<option value="2345">2345</option>
<option value="3">3</option>
<option value="34">34</option>
<option value="345">345</option>
<option value="3456">3456</option>
<option value="5">5</option>
<option value="51">51</option>
<option value="51w">51w</option>
<option value="51wi">51wi</option>
<option value="51win">51win</option>
<option value="51windows">51windows</option>
</select></span>
    </td>
  </tr>
</form>
</table>
<hr>
<script language="javascript">
var TempArr=[];//存贮optionfunction Init(){
var SelectObj=document.frm.elements["demo"]
/*先将数据存入数组*/
with(SelectObj)
for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]
}function SelectTip(flag){
var TxtObj=document.frm.elements["txt"]
var SelectObj=document.getElementById("demo")
var Arr=[]
with(SelectObj){
var SelectHTML=innerHTML.match(/<[^>]*>/)[0]
for(i=0;i<TempArr.length;i++)
if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化
Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>"
innerHTML=SelectHTML+Arr.join()+"</SELECT>"
}
}
</script>
</body>

调试易

select有text的功能

解决方案 »