Modest opinions  
by a humble autodidact
<select>有害

用HTML写用户界面的好处之一是当页面内容较多时，用户可以通过浏览器的搜索功能快速定位，而不用紧盯着屏幕来回拉动滚动条寻找，但<select>产生的下拉菜单是个例外－－浏览器的搜索功能搜索不到菜单里的内容。看这个网页：

 

在这个网页上进行选择简直是损害健康。我认为<select>里的选项以不超过10项为宜，如果有很多选项怎么办呢？有两种解决办法：

方法－：将选项分类，然后分层选择。比如要让用户选择一个省份，可以先将所有的省份分为“东北”，“华北”，“东南”，“中南”，“西南”，“西北”几片区，放在第一个<select>里，然后用Javascript根据片区的选择，在第二个<select>里产生省份选项。

办法二：用<div>元素和Javascript模拟出一个下拉菜单，让浏览器可以搜索到选项。我的sterilize_select.js就是一个尝试。使用的时候在网页里照常写<select>，只需在<body>的onload里加上这么一句：

sterilize_select(document.getElementById(<<select>元素的id>))

经过无害化处理的下拉菜单是搜索友好的：

 

sterilize_select.js的无害化处理不会改变<select>在<form>提交时的行为，即<form>提交时，原先<select>产生的内容还是照常的。

下面是代码：

sterilize_select.js

 以及测试的网页：

select_test.htm

 

posted on 2008-07-24 22:09  yushih  阅读(328)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3