虚心请教：如何用JS实现类似COMBOX功能？

http://fason.nease.net/temp/combox.htm

解决方案 »

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

<body leftmargin=3><form name=form1 ><br><span style=font-size=12>输入要查找的关键字：</span><br><input class=input type=text name=index value=''  class=buttonface  onkeyDown="
for(i=0;i<document.form1.help_index.length;i++)
{
var len=this.value.length;
if(len>0)
   if(document.form1.help_index.options[i].text.substring(0,len)==this.value.substring(0,len))
{
     document.form1.help_index.options[i].selected=true;
break;
  }
}
"
onkeyUp ="
for(i=0;i<document.form1.help_index.length;i++)
{
var len=this.value.length;
  if(len>0)
   if(document.form1.help_index.options[i].text.substring(0,len)==this.value.substring(0,len))
{
     document.form1.help_index.options[i].selected=true;
break;
  }
}
"
><table width=100% border=0 cellpading=2 cellspacing=0 class=bordergr align=center><tr  ><td bgcolor=white width=100% ><select name=help_index size=10 style=width:100%;border:0;bgcolor:000000;color:ff0000><option value='0903000000'>个人</option><option value='0702000000'>个人修改</option><option value='6809020000'>工作权限</option><option value='6809010000'>工作组</option><option value='1001000000'>管理阅读</option><option value='1002000000'>维护</option><select></td></tr></table></form>
http://expert.csdn.net/Expert/topic/1900/1900190.xml?temp=.9224665
蔡姐姐，我看到您的帖子了，能不能根据上次您给我提供那个代码来修改，就是已经结贴的那个，源码如下：随着用户的输入，在下拉框中不断匹配用户输入的部分汉字或代码？
！谢谢<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/xsl" href="rt.xsl"?>
<RTS>
<RT>
<DM>0</DM>
<DMYY>男</DMYY>
<PYM>male</PYM>
</RT>
<RT>
<DM>1</DM>
<DMYY>女</DMYY>
<PYM>female</PYM>
</RT>
        <RT>
<DM>2</DM>
<DMYY>不详</DMYY>
<PYM>unknown</PYM>
</RT>
        <RT>
<DM>3</DM>
<DMYY>未知</DMYY>
<PYM>unknown</PYM>
</RT>
        <RT>
<DM>4</DM>
<DMYY>待定</DMYY>
<PYM>unknown</PYM>
</RT>
</RTS>
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=1;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
//selstr+=document.all.mysel.options[i].value+";";
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body>
<input type="text" name="mytext" size="40" onfocus="document.all.mydiv.style.display='block'"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()">
<option>代码  代码意义</option>
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
</div>
<input type="radio" name="myradio" value="1"/>单选
<input type="radio" name="myradio" value="2" checked="checked"/>多选
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
小龙，按上面combobox的做法下拉列表框要求是多行展开的，你的要求是什么样的
姐,看到你在CSDN上的留言了,我的要求是这样的:
    1。保证以前您帮我已实现的那些功能都确实可用的基础上,
    2。当用户在文本输入框中开始敲入代码时,下拉列表框自动展开弹出,在弹出的下拉列表框中不断匹配用户输入的代码,把最相近的单个或多个代码高度加亮,按照相近的次序排列显示在下拉列表框的最上端,其他不相近的代码则按照原来的次序在下面依次排列下去!当用户敲入某个完整的代码时,自动把它的对应的代码意义显示在文本输入框中,用户输入的那个完整的代码则消失!
    3当用户输入汉字也就是代码意义时,在弹出的下拉列表框中不断匹配用户输入的代码意义,把最相近的单个或多个代码意义加亮,按照相近的次序高度加亮显示排列在下拉列表框的最上端,其他不相近的代码意义则按照原来的次序在下面依次排列下去!用户自己敲入的代码意义不完整或不属下拉列表框的代码意义范围内时,用户点提交按扭时要弹出警告提示用户"不完整或不合法的代码意义,无法提交"！
    4。多选时，假设用户已自己手工敲入一个完整的代码意义，并已在文本框中显示出来了，当用户点击（选中）下拉列表框中另一个代码意义时，被选中的代码意义将自动追加在已输入的代码意义之后，并用分号隔开！
    5。用户自己敲入的代码意义不完整或不属下拉列表框的代码意义范围内时，用户在下拉列表框随意选择一个代码意义就可将当前文本框的不完整的那个代码覆盖掉！
写了一个基本的，如果xml文件本身是排序的，效果会好些
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=0;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
//selstr+=document.all.mysel.options[i].value+";";
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
}function mysearch(obj)
{
var len=obj.value.length;
if(len>0)
for(i=0;i<document.all.mysel.options.length;i++)
{
   if(document.all.mysel.options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all.mysel.options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all.mysel.options[i].selected=true;
     break;
   }
}
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body>
<input type="text" name="mytext" size="40" onfocus="document.all.mydiv.style.display='block'" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
</div>
<input type="radio" name="myradio" value="1" onclick="document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
姐：
  多选时，选中第一个选项时，在文本框里的第一个选项前面是不是最好不要出现AND或OR呢？
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=0;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
else
selstr+=document.all.mysel.options[i].value+" ";
}
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
}function mysearch(obj)
{
var len=obj.value.length;
if(len>0)
for(i=0;i<document.all.mysel.options.length;i++)
{
   if(document.all.mysel.options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all.mysel.options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all.mysel.options[i].selected=true;
     break;
   }
}
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body>
<input type="text" name="mytext" size="40" onfocus="document.all.mydiv.style.display='block'" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
</div>
<input type="radio" name="myradio" value="1" onclick="document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
能不能点击单选时，把AMD和OR的选择隐藏，多选时再显示出来？，另外文本框的长度要定死，选项过多时用TOOLTIP功能提示出来！
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=0;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
else
selstr+=document.all.mysel.options[i].value+" ";
}
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
document.all.mytext.title=document.all.mytext.value;
}function mysearch(obj)
{
var len=obj.value.length;
if(len>0)
for(i=0;i<document.all.mysel.options.length;i++)
{
   if(document.all.mysel.options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all.mysel.options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all.mysel.options[i].selected=true;
     break;
   }
}
document.all.mytext.title=document.all.mytext.value;
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body>
<input type="text" name="mytext" size="30" onfocus="document.all.mydiv.style.display='block'" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()" onclick="myselect()" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
</div>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=0;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
else
selstr+=document.all.mysel.options[i].value+" ";
}
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
document.all.mytext.title=document.all.mytext.value;
}function mysearch(obj)
{
var len=obj.value.length;
if(len>0)
{
for(i=0;i<document.all.mysel.options.length;i++)
{
   if(document.all.mysel.options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all.mysel.options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all.mysel.options[i].selected=true;
     break;
   }
}
document.all.mytext.title=document.all.mytext.value;
}
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body>
<input type="text" name="mytext" size="30" onfocus="document.all.mydiv.style.display='block'" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
</div>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
多个文本框之间切换
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect()
{
selstr=document.all.mytext.value;
for(i=0;i<document.all.mysel.options.length;i++)
if(document.all.mysel.options[i].selected)
{
if(document.all.myradio[1].checked)
{
if(selstr.indexOf(document.all.mysel.options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all.mycon.value+" "+document.all.mysel.options[i].value+" ";
else
selstr+=document.all.mysel.options[i].value+" ";
}
}
else
{
selstr=document.all.mysel.options[i].value;
break;
}
}
//alert(selstr);
document.all.mytext.value=selstr;
document.all.mytext.title=document.all.mytext.value;
}function mysearch(obj)
{
var len=obj.value.length;
if(len>0)
{
for(i=0;i<document.all.mysel.options.length;i++)
{
   if(document.all.mysel.options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all.mysel.options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all.mysel.options[i].selected=true;
     break;
   }
}
document.all.mytext.title=document.all.mytext.value;
}
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body onload="lastobj=document.all.mydiv">
<input type="text" name="mytext" size="30" onfocus="lastobj.style.display='none';document.all.mydiv.style.display='block';lastobj=document.all.mydiv" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect()" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
</div>
<input type="text" name="mytext2" size="30" onfocus="lastobj.style.display='none';document.all.mydiv2.style.display='block';lastobj=document.all.mydiv2" onkeydown="mysearch(this)" onkeyup="mysearch(this)" readOnly="readOnly"/><br/>
<div id="mydiv2" style="display:none">同理</div>
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<SCRIPT LANGUAGE="javascript">
<xsl:comment>
<![CDATA[
function myselect(j)
{
selstr=document.all("mytext"+j).value;
for(i=0;i<document.all("mysel"+j).options.length;i++)
if(document.all("mysel"+j).options[i].selected)
{
if(document.all("myradio"+j)[1].checked)
{
if(selstr.indexOf(document.all("mysel"+j).options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all("mycon"+j).value+" "+document.all("mysel"+j).options[i].value+" ";
else
selstr+=document.all("mysel"+j).options[i].value+" ";
}
}
else
{
selstr=document.all("mysel"+j).options[i].value;
break;
}
}
//alert(selstr);
document.all("mytext"+j).value=selstr;
document.all("mytext"+j).title=document.all("mytext"+j).value;
}function mysearch(obj,j)
{
var len=obj.value.length;
if(len>0)
{
for(i=0;i<document.all("mysel"+j).options.length;i++)
{
   if(document.all("mysel"+j).options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all("mysel"+j).options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all("mysel"+j).options[i].selected=true;
     break;
   }
}
document.all("mytext"+j).title=document.all("mytext"+j).value;
}
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<body onload="lastobj=document.all.mydiv">
<input type="text" name="mytext" size="30" onfocus="lastobj.style.display='none';document.all.mydiv.style.display='block';lastobj=document.all.mydiv" onkeydown="mysearch(this,'')" onkeyup="mysearch(this,'')" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<select name="mysel" onchange="myselect('')" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
</div>
<input type="text" name="mytext2" size="30" onfocus="lastobj.style.display='none';document.all.mydiv2.style.display='block';lastobj=document.all.mydiv2" onkeydown="mysearch(this,2)" onkeyup="mysearch(this,2)" readOnly="readOnly"/><br/>
<div id="mydiv2" style="display:none">
<select name="mysel2" onchange="myselect(2)" size="5">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
<select name="mycon2"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio2" value="1" onclick="document.all.mycon2.style.display='none';document.all.mytext2.value='';document.all.mytext2.readOnly=false"/>单选
<input type="radio" name="myradio2" value="2" checked="checked" onclick="document.all.mycon2.style.display='block';document.all.mytext2.value='';document.all.mytext2.readOnly=true"/>多选
</div>
<input type="button" value="submit"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
姐：
   如果代码和代码框的长度都很长，下拉框的长度就让其动态分配！如果代码和代码意义的长度都很短，就让文本框的长度和下拉框的长度尽量相等！每个控件的“重填按扭”最好放在“多选”单选框的右边，点击“重填按扭”后对应的文本框自动清空！
   怎么样在保持控件现有功能正常运行的情况下，第一个文本框的下拉框选项来自sex1.xml，
第二个文本框的下拉框选项来自sex2.xml，最好做成方法传参数的形式，每文本框的下拉框选项
可随着传进的指定路径的XML文件名字变化而变化！
小龙你这个让我改了好一会儿呢：）
用数据岛处理了，但还是不能做到那么通用，现在是每个xml对应一个xsl
“如果代码和代码意义的长度都很短，就让文本框的长度和下拉框的长度尽量相等！”是指让下拉框的宽度延伸到文本框那么宽？<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
</head>
<SCRIPT LANGUAGE="javascript">
lastobj=null;
function myselect(j)
{
selstr=document.all("mytext"+j).value;
for(i=0;i<document.all("mysel"+j).options.length;i++)
if(document.all("mysel"+j).options[i].selected)
{
if(document.all("myradio"+j)[1].checked)
{
if(selstr.indexOf(document.all("mysel"+j).options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all("mycon"+j).value+" "+document.all("mysel"+j).options[i].value+" ";
else
selstr+=document.all("mysel"+j).options[i].value+" ";
}
}
else
{
selstr=document.all("mysel"+j).options[i].value;
break;
}
}
document.all("mytext"+j).value=selstr;
document.all("mytext"+j).title=document.all("mytext"+j).value;
}function mysearch(obj,j)
{
var len=obj.value.length;
if(len>0)
{
for(i=0;i<document.all("mysel"+j).options.length;i++)
{
   if(document.all("mysel"+j).options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all("mysel"+j).options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all("mysel"+j).options[i].selected=true;
     break;
   }
}
document.all("mytext"+j).title=document.all("mytext"+j).value;
}
}</SCRIPT>
<XML id="source" src="rt.xml"></XML>
<XML id="style" src="rt.xsl"></XML>
<XML id="source2" src="rt2.xml"></XML>
<XML id="style2" src="rt2.xsl"></XML>
<SCRIPT FOR="window" EVENT="onload">
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
xslTarget2.innerHTML = source2.transformNode(style2.XMLDocument);
lastobj=document.all.mydiv;
document.all.mysel.size=document.all.mysel.options.length;
document.all.mysel2.size=document.all.mysel2.options.length;
</SCRIPT>
<body>
<form>
<input type="text" name="mytext" size="30" onfocus="lastobj.style.display='none';document.all.mydiv.style.display='block';lastobj=document.all.mydiv" onkeydown="mysearch(this,'')" onkeyup="mysearch(this,'')" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<div id="xslTarget"></div>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type=reset value=reset>
</div>
</form>
<form>
<input type="text" name="mytext2" size="30" onfocus="lastobj.style.display='none';document.all.mydiv2.style.display='block';lastobj=document.all.mydiv2" onkeydown="mysearch(this,2)" onkeyup="mysearch(this,2)" readOnly="readOnly"/><br/>
<div id="mydiv2" style="display:none">
<div id="xslTarget2"></div>
<select name="mycon2"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio2" value="1" onclick="document.all.mycon2.style.display='none';document.all.mytext2.value='';document.all.mytext2.readOnly=false"/>单选
<input type="radio" name="myradio2" value="2" checked="checked" onclick="document.all.mycon2.style.display='block';document.all.mytext2.value='';document.all.mytext2.readOnly=true"/>多选
<input type=reset value=reset>
</div>
<form>
<input type="button" value="submit"/>
</body>
</html>rt.xsl
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<select name="mysel" onchange="myselect('')" size="2">
<xsl:for-each select="RTS/RT">
<option>
<xsl:attribute name="value">
<xsl:value-of select="DMYY"/>
</xsl:attribute>
<xsl:value-of select="DM"/>  
<xsl:value-of select="DMYY"/>
</option>
</xsl:for-each>
</select><br/>
</xsl:template>
</xsl:stylesheet>
姐姐早：
    当我采用很大的XML文件时，下拉框也随之变得很长，没有滚动条，怎样控制下拉框在合适的长度呢？比如只显示前5个选项的长度！还有，当代码和代码意义的长度都很短，下拉框的宽度延就要伸到文本框那么宽！
                                                                       谢谢！
My God!!……姐……？小弟……？^O^
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
</head>
<SCRIPT LANGUAGE="javascript">
lastobj=null;
function myselect(j)
{
selstr=document.all("mytext"+j).value;
for(i=0;i<document.all("mysel"+j).options.length;i++)
if(document.all("mysel"+j).options[i].selected)
{
if(document.all("myradio"+j)[1].checked)
{
if(selstr.indexOf(document.all("mysel"+j).options[i].value)>-1)
alert("您已经选过了此项！");
else
{
if(selstr!="")
selstr+=document.all("mycon"+j).value+" "+document.all("mysel"+j).options[i].value+" ";
else
selstr+=document.all("mysel"+j).options[i].value+" ";
}
}
else
{
selstr=document.all("mysel"+j).options[i].value;
break;
}
}
document.all("mytext"+j).value=selstr;
document.all("mytext"+j).title=document.all("mytext"+j).value;
}function mysearch(obj,j)
{
var len=obj.value.length;
if(len>0)
{
for(i=0;i<document.all("mysel"+j).options.length;i++)
{
   if(document.all("mysel"+j).options[i].text.substring(0,len)==obj.value.substring(0,len)||document.all("mysel"+j).options[i].value.substring(0,len)==obj.value.substring(0,len))
   {
     document.all("mysel"+j).options[i].selected=true;
     break;
   }
}
document.all("mytext"+j).title=document.all("mytext"+j).value;
}
}</SCRIPT>
<XML id="source" src="rt.xml"></XML>
<XML id="style" src="rt.xsl"></XML>
<XML id="source2" src="rt2.xml"></XML>
<XML id="style2" src="rt2.xsl"></XML>
<SCRIPT FOR="window" EVENT="onload">
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
xslTarget2.innerHTML = source2.transformNode(style2.XMLDocument);
lastobj=document.all.mydiv;
document.all.mysel.size=document.all.mysel.options.length>4?5:document.all.mysel.options.length;
document.all.mysel2.size=document.all.mysel2.options.length>4?5:document.all.mysel2.options.length;
document.all.mysel.style.width=document.all.mytext.clientWidth;
document.all.mysel2.style.width=document.all.mytext2.clientWidth;
</SCRIPT>
<body>
<form>
<input type="text" name="mytext" size="30" onfocus="lastobj.style.display='none';document.all.mydiv.style.display='block';lastobj=document.all.mydiv" onkeydown="mysearch(this,'')" onkeyup="mysearch(this,'')" readOnly="readOnly"/><br/>
<div id="mydiv" style="display:none">
<div id="xslTarget"></div>
<select name="mycon"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio" value="1" onclick="document.all.mycon.style.display='none';document.all.mytext.value='';document.all.mytext.readOnly=false"/>单选
<input type="radio" name="myradio" value="2" checked="checked" onclick="document.all.mycon.style.display='block';document.all.mytext.value='';document.all.mytext.readOnly=true"/>多选
<input type=reset value=reset>
</div>
</form>
<form>
<input type="text" name="mytext2" size="20" onfocus="lastobj.style.display='none';document.all.mydiv2.style.display='block';lastobj=document.all.mydiv2" onkeydown="mysearch(this,2)" onkeyup="mysearch(this,2)" readOnly="readOnly"/><br/>
<div id="mydiv2" style="display:none">
<div id="xslTarget2"></div>
<select name="mycon2"><option value="and">and</option><option value="or">or</option></select>
<input type="radio" name="myradio2" value="1" onclick="document.all.mycon2.style.display='none';document.all.mytext2.value='';document.all.mytext2.readOnly=false"/>单选
<input type="radio" name="myradio2" value="2" checked="checked" onclick="document.all.mycon2.style.display='block';document.all.mytext2.value='';document.all.mytext2.readOnly=true"/>多选
<input type=reset value=reset>
</div>
<form>
<input type="button" value="submit">
</body>
</html>