text和select联动的问题

楼主按我这个修改一下：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
function del(n)
{
var oChild=form1.orders.children(parseInt(n));
form1.orders.removeChild(oChild);
}
</script>
<body>
<input value="删除" type="button" onClick="del(0)">
<form name=form1>
<input type=text name='id' >
<select name='orders'>
<option value='10011'>dd</option>
<option value='10021'>ee</option>
<option value='10111'>de</option>
<option value='13011'>sdf</option>
<option value='20011'>ad</option>
<option value='21011'>were</option>
</select>
</form>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

var oNewNode = document.createElement("<option value='10011'>dd</option>");  //创建一个结点
   form1.orders.appendChild(oNewNode);               //为已知控件添加一个结点这些函数组合起来，就可以实现那些功能了
<!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="">
</HEAD><BODY>
<SELECT NAME="sel1"></SELECT><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<INPUT TYPE="button" onclick="addo()" value="add">
<INPUT TYPE="button" onclick="re()" value="remove">
</BODY>
</HTML>
<input type=text name='id' onblur="dele(this.value)"><script language="javascript">
function dele(n)
{
for(var i = 0;i<form1.orders.length;i++)
{
           if((form1.orders.item(i).value).substring(1,form1.id.value) != n)
                  form1.orders.remove(i);
         }

}
</script>
<!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="">
</HEAD><BODY>
<SELECT NAME="sel1"></SELECT><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<INPUT TYPE="button" onclick="addo()" value="add">
<INPUT TYPE="button" onclick="re()" value="remove">
</BODY>
</HTML>
各位好象误会了我的意思，我是要当在text框中输入值时，动态查找select中value对应的项，并删除不相关项，单单要删或添加一个option我也会啊。to cloudside(在云的那一方)：
清空text时select是需要恢复的！
可输入下拉框（不相似移除）
http://jkisjk.vip.sina.com/html/EditableSelect1.htm注：在ＩＥ5.5＋ＳＰ2或以上可以使用
不是麻不麻烦的事情，其实我的主要目的是为了快速定位select中的项，因为select的项有进修可能太多（可能达到1000个），不便于查找，但有些时候可能只有一两个，所以才出此下策
我是这么考虑的，把option中每一项存入一个数组，在text输入数值时，比如100，遍历数组，找出前三位为该值的数组index，重写option，这样就能有效快速定位select项，但如何遍历进行模式查找我不会
循环不就可以遍历吗？
for(int i =0;i< arraylist.size();i++){
  if(arraylist[i].indexof(100)){
    ...
  }
}
上边打错了
是if(arraylist[i].indexof(100)>0){
}
我用vbscript写了个函数，想把不匹配的项隐藏起来，但为什么不管用？？？我已经是IE6啦先在text中加入一个事件：
<input type=text name='id' onkeyup='orchang()'>函数：
<script Language=VBScript>
sub orchang()
  dim txt, intLenTxt, intLenOp, i
  txt=CStr(form1.id.value)
  intLenTxt = Len(form1.id.value)
  intLenOp = CLng(form1.orders.options.length)
  for i=0 to intLenOp-1
    if Left(form1.orders.options(i).value, intLenTxt) <> txt then
      form1.orders.options(i).style.display="none"
    end if
  next
end sub
</script>
这个是按照你的要求编写的代码，呵呵，不过是纯粹客户端的，不知道1000条记录是不是会影响速度，你自己试试看吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var a = new Array();  //存放value的数组
var b = new Array();  //存放text的数组
var sel; //下拉列表的引用
var tx;    //文本框的引用
function buildArray()   //将值存放到两个数组中
{
sel = document.form1.orders;
tx = document.form1.ids;
for(var i=0;i<sel.options.length;i++)
{
a[i] = sel.options[i].value;
b[i] = sel.options[i].text;
}
}

function findItem()   //寻找需要的内容
{
if(tx.value == "")
{
alert("请输入需要查询的值!");
}
else
{
sel.options.length = 0;
for(var i=0;i<a.length;i++)
{
if(a[i].indexOf(tx.value) == 0)
{
sel.options.add(new Option(b[i],a[i]));
}
}
}
}

function resetItem()   //恢复下拉列表的初始状态
{
for(var i=0;i<a.length;i++)
{
sel.options.add(new Option(b[i],a[i]));
}
}
</script>
</head><body onLoad="buildArray();">
<form name="form1" id="form1">
<input type=text name="ids" id="ids">
<input type="button" value="点击确定搜索内容" onClick="findItem();">
<input type="button" value="恢复初始状态" onClick="resetItem();"><br>
<select name="orders" id="orders">
<option value="10011">dd</option>
<option value="10021">ee</option>
<option value="10111">de</option>
<option value="13011">sdf</option>
<option value="20011">ad</option>
<option value="21011">were</option>
</select>
</form></body>
</html>
哈哈，本人参考memoriccell(记忆细胞)的提示，采用了递归方法解决了这个问题，至于当1000个option时会不会很慢，等会再试。
功能：不需任何按钮，直接在text中输入、删除字符即可，完全按text内容动态增减option项，效果良好，请版主加精！
最后感谢memoriccell<HTML>
<HEAD>
<TITLE>Text和Select联动演示</TITLE>
<script>
var oTx, oSel;
var V=new Array();  //存放value的数组
var T=new Array();  //存放text的数组function bAry() {
  oTx=document.form1.sid;
  oSel=document.form1.orders;
  for(var i=0;i<oSel.options.length;i++) {
    V[i]=oSel.options[i].value;
    T[i]=oSel.options[i].text;
  }
}function aSel(sTx) {
  oSel.options.length=0;
  for(var i=0;i<V.length;i++) {
    if(V[i].indexOf(sTx)==0)
      oSel.options.add(new Option(T[i],V[i]));
  }
}function hSel() {
  var sTx;
  sTx=oTx.value;
  if(event.keyCode==46||event.keyCode==8){
    aSel(sTx);
    return;
  }
  for(var i=0;i<V.length;i++){
    if(oSel.options(i)!=undefined){
      if(oSel.options(i).value.indexOf(sTx)!=0){
        oSel.remove(i);
        hSel();
      }
    }
  }
}
</script>
</HEAD><BODY onLoad="bAry();">
<form name="form1">
<input type=text name='sid' value="" onkeyup="hSel();">
<select name='orders'>
<option value='10011'>10011</option>
<option value='10021'>10021</option>
<option value='10111'>10111</option>
<option value='13011'>13011</option>
<option value='20011'>20011</option>
<option value='20012'>20012</option>
<option value='20112'>20112</option>
<option value='21012'>21012</option>
<option value='22012'>22012</option>
<option value='30011'>30011</option>
<option value='30012'>30012</option>
<option value='30112'>30112</option>
<option value='31012'>31012</option>
<option value='40011'>40011</option>
<option value='40012'>40012</option>
</select>
</form>
</BODY>
</HTML>