怎样实现输入文本框和列表实现联动?

function change(obj) {
var size = document.form.size;

for (var i = 0; i < size.options.length; i++) {
if (size.options[i].value.substring(0,4) == obj.value) {
size.options[i].selected = true;
break;
}
}
}
输入:<input name="textsize" type="text" size="20" maxlength="20" onkeyup="javascript:change(document.form.textsize);">

解决方案 »

  1.   

    <script>
    function dd()
    {
    for (i=0;i<=document.all.size.length-1;i++)
    {
    a="";
    a=document.all.size.options[i].value;
    if (document.all.textsize.value==a.substring(0,4))
    {
    document.all.size.options[i].selected=true;
    return false;
    }
    }
    }
    </script>
    <body>
    <form name="form" method="post" action="">
      输入:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="dd()">
    型号:            
    <select name="size" size="4">
      <option value="1210-1">1210-1</option>
      <option value="1210-2" selected>1210-2</option>
      <option value="1210-3">1210-3</option>
      <option value="1220-1">1220-1</option>
      <option value="1220-2">1220-2</option>
      <option value="1220-3">1220-3</option>
      <option value="2100-1">2100-1</option>
      <option value="2100-2">2100-2</option>
      <option value="2100-3">2100-3</option>
      <option value="2100-4">2100-4</option>
      <option value="2120-1">2120-1</option>
      <option value="2120-2">2120-2</option>
      <option value="2120-3">2120-3</option>
      <option value="3110-1">3110-1</option>
      <option value="3110-2">3110-2</option>
      <option value="3220-1">3220-1</option>
      <option value="3220-2">3220-2</option>
      <option value="7110-1">7110-1</option>
      <option value="7110-2">7110-2</option>
      <option value="7110-3">7110-3</option>
      <option value="7210-1">7210-1</option>
      <option value="7210-2">7210-2</option>
      <option value="8550-1">8550-1</option>
      <option value="8551-2">8551-2</option>
    </select><input type=button onclick="dd()">
    </form>
    </body>
      

  2.   

    <script language=javascript>
    function autosearch(txtobj,selobj)
    {
        var txt1=txtobj.value.substr(0,txtobj.value.length),txt2;
        for(var i=0;i<=selobj.options.length-1;i++)
        {
            txt2=selobj.options[i].value.substr(0,txtobj.value.length);
            if (txt1==txt2) {selobj.options[i].selected=true; return;}
        }
    }
    </script><form name="form" method="post" action="">
      输入:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="autosearch(this,size1);">
    型号:
    <select name="size1" size="4">      'size为保留字，改名
    ............................
      

  3.   

    千万别用document.all之类的lj语法，mozilla会有问题。
    简单的一句话就影响跨浏览器的使用，真不明白为什么这么多人在用。
      

  4.   

    TO: mjpclab幸亏来得及时.呵呵~~~
      

  5.   

    <script language="javascript">
    <!--
      function funchange()
      {
        var ingc;
        var strNote;
        for (ingc=0;ingc<document.all.size.length-1;ingc++)
        {
          strNote = document.all.size[ingc].value;
          if (strNote.indexOf(document.all.textsize.value,0) < 0){}
          else document.all.size[ingc].selected = true;
        }
      }
    //-->
    </script><form name="form" method="post" action="">
    input:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="funchange();">
    type:
    <select name="size" size="4">
      <option value="1210-1">1210-1</option>
      <option value="1210-2" selected>1210-2</option>
      <option value="1210-3">1210-3</option>
      <option value="1220-1">1220-1</option>
      <option value="1220-2">1220-2</option>
      <option value="1220-3">1220-3</option>
      <option value="2100-1">2100-1</option>
      <option value="2100-2">2100-2</option>
      <option value="2100-3">2100-3</option>
      <option value="2100-4">2100-4</option>
      <option value="2120-1">2120-1</option>
      <option value="2120-2">2120-2</option>
      <option value="2120-3">2120-3</option>
      <option value="3110-1">3110-1</option>
      <option value="3110-2">3110-2</option>
      <option value="3220-1">3220-1</option>
      <option value="3220-2">3220-2</option>
      <option value="7110-1">7110-1</option>
      <option value="7110-2">7110-2</option>
      <option value="7110-3">7110-3</option>
      <option value="7210-1">7210-1</option>
      <option value="7210-2">7210-2</option>
      <option value="8550-1">8550-1</option>
      <option value="8551-2">8551-2</option>
    </select>
    </form>运行的时候表吓坏了，哈~~~