采用xml,xsl,js,xmldom编写.兼容ie和firefox浏览器.
效果如以下网址:
http://www.vcsale.com/cheap.Final_Fantasy_XI.3.aspx
1.首先,一个简单的js类.
function inputSelection()
![]()
}
调用说明:
a.首先您可以先通过服务器端脚本输出获得xmldocument供 inputSelection使用.
比如使用asp.net,asp,或php
也可以使用xmlhttp或xmldom直接获取数据提供页输出的xml(或字串并自己转换为xml)
本来这步操作,我可以加在 inputSelection 类里的,但是我的页面是由服务器在xslt输出html时生成的xml串,所以将获提xmldomcumnet的过程分离出来了.
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all) ? true : false;
var ServerStr="<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>root<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";
<xsl:for-each select="//CurrentGame/Server">
ServerStr += "<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>Server > }
b,接下来,页面上按位置摆放您的html element.
<input type="hidden" id="ServerID" value="" onchange="alert('tst');" />
<input type="hidden" id="ServerName" />
<div class="div2">
<span style=" margin:2px 0 0 15px">
<table border="0" width="100%" id="tabContainer" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" valign="top">
Select Your Server To Buy Final Fantasy XI Gil</td>
<td width="200">
<input id="tFirstC" class="inp2" maxlength="20" style="cursor:default;" size="20" onclick="removeAll()" onkeyup="removeAll()" />
</td>
</tr>
<tr>
<td>
<div id="divContainer" style="overflow-x:hidden;overflow-y:auto;text-align:left;line-height:150%;width:180px;height:200px;font-weight:0;font-size: 12px;color:#333333;margin: 0px;padding: 4px;z-index: 1; border-left:1px solid #336699;border-bottom:1px solid #336699;border-right:1px solid #336699;border-top:1px solid #336699;background-color: white;display:none;" />
</td>
</tr>
</table>
</span>
</div>
c. 在上一步看到, input onkeyup时触发了removeAll方法. 实际是清除模拟select option的div.并且重新动态加载.
这与ajax有区别, 因为所需数据在页面加载时已全加载到string里,或者说又加载到了xmldom里.不需要再次到服务器端请求.
在removeAll方法里, 实例化 inputSelection,并进行初始化和进行清除及option item重建.
function removeAll()
![]()
}
d,最后一步,当页面点击其它位置时,隐藏div
<body onclick="hideSelection(event)">
function hideSelection(e)
{
var objx=document.getElementById("divContainer");
var cobj=document.getElementById("tFirstC");
var eobj= e.srcElement ? e.srcElement : e.target;
if(eobj.id != cobj.id)
objx.style.display="none";
}
这个东西到现在用起来,还不是很方便,即移植麻烦了一点,等有空时,我把xml数据获取的部分也一起写到inputSelection里.
欢迎进行改进.和提出bug.谢谢.