通过DIV模拟实现下拉选择框
Windows自带的下拉选择框的优先级别比大多数控件(media player也有类似的“毛病”)要高。因此,在具有绝对定位的层的网页里,一旦触发下拉框空间的onChange事件,将会引起整个页面的闪烁,这样将造成用户体验明显下降。于是,我参考了网上一篇未署名的帖子,模拟出了一个具有筛选功能的下拉选择控件。在我们Web Builder的控件库里,我们改进了该控件,使它具有了自学习的功能(能够将下拉选项中没有的,用户输入的值,自动学习并且存入到数据库)。
一下使我们改进后的下拉选择控件的代码:
1: 建立控件的内容由txt_SearchLimit、txt_SearchLimit_input、txt_SearchLimit_button、txt_SearchLimit_layer、txt_SearchLimit_table组成。
function BuildControl()
{
var tStrToolBar ="";//控件的内容
tStrToolBar += "<div id=\"txt_SearchLimit\" ctrlId=\"txt_SearchLimit\" selectedIndex=\"4\" value=\"0\" dspValue=\"选择时间范围\" style=\"\" class=\"\">";
tStrToolBar += " <span>";
tStrToolBar += "<input id=\"txt_SearchLimit_input\" value=\"\" type=\"text\" class=\"\" style=\"width:80px;border-right:none none none;\" onkeydown=\"displayLayer(this.parentElement.parentElement);\" onKeyup=\"lookUpInput(this.parentElement.parentElement);\" >";
tStrToolBar += "<input type=\"button\" id=\"txt_SearchLimit_button\" value=\" \" class=\"SelectButton\" style=\"width:18px;height:18px;\" onClick=\"showLayer(this.parentElement.parentElement)\"/>";
tStrToolBar += "</span>";
tStrToolBar += "<div id=\"txt_SearchLimit_layer\" bgcolor=\"#FFFFFF\" class=\"SelectTreeList\" style=\"width:80px;height:100px;\">";
tStrToolBar += " <table id=\"txt_SearchLimit_table\" width=\"80px\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" bgcolor=\"#FFFFFF\">";
tStrToolBar += " <tr onmouseover=\"moveWithOptions('highlight','white')\" onmouseout=\"moveWithOptions('','')\" onmouseup=\"selectedText(this.parentElement.parentElement.parentElement.parentElement)\">";
tStrToolBar += " <td style=\"display:none\">1</td>";
tStrToolBar += " <td >今天</td>";
tStrToolBar += " </tr>";
tStrToolBar += " <tr onmouseover=\"moveWithOptions('highlight','white')\" onmouseout=\"moveWithOptions('','')\" onmouseup=\"selectedText(this.parentElement.parentElement.parentElement.parentElement)\">";
tStrToolBar += " <td style=\"display:none\">3</td>";
tStrToolBar += " <td >最近三天</td>";
tStrToolBar += " </tr>";
tStrToolBar += " <tr onmouseover=\"moveWithOptions('highlight','white')\" onmouseout=\"moveWithOptions('','')\" onmouseup=\"selectedText(this.parentElement.parentElement.parentElement.parentElement)\">";
tStrToolBar += " <td style=\"display:none\">7</td>";
tStrToolBar += " <td >最近一星期</td>";
tStrToolBar += " </tr>";
tStrToolBar += " <tr onmouseover=\"moveWithOptions('highlight','white')\" onmouseout=\"moveWithOptions('','')\" onmouseup=\"selectedText(this.parentElement.parentElement.parentElement.parentElement)\">";
tStrToolBar += " <td style=\"display:none\">30</td>";
tStrToolBar += " <td >最近30天</td>";
tStrToolBar += " </tr>";
tStrToolBar += " <tr onmouseover=\"moveWithOptions('highlight','white')\" onmouseout=\"moveWithOptions('','')\" onmouseup=\"selectedText(this.parentElement.parentElement.parentElement.parentElement)\">";
tStrToolBar += " <td style=\"display:none\">0</td>";
tStrToolBar += " <td >选择时间范围</td>";
tStrToolBar += " </tr></table>";
tStrToolBar += " </div>";
document.body.innerHTML = tStrToolBar;
}
{
var tStrToolBar ="";//控件的内容
tStrToolBar += "<div id=\"txt_SearchLimit\" ctrlId=\"txt_SearchLimit\" selectedIndex=\"4\" value=\"0\" dspValue=\"选择时间范围\" style=\"\" class=\"\">";
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
document.body.innerHTML = tStrToolBar;
}
2、加入控制控件的脚本
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
//ShowAutoLearnData(objAutoLearn);
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
3、获取下拉选项显示位置的函数
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
4、查找用户输入项
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
5、将选择的值放置到文本框并且给控件的value,Dspvalue属性赋值
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)