我认为多选列表具有完美的功能——只需按下Ctrl键，同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框：
选出你最喜爱的快餐：
上面那个列表框的代码如下：
<form method=get action=>
<b>Check your favorite fast food:</b><br/>
<SELECT MULTIPLE SIZE=5 name=favorites>
<OPTION VALUE=McDonalds>McDonalds</option>
<OPTION VALUE=BurgerKing>Burger King</option>
<OPTION VALUE=Wendys>Wendys</option>
<OPTION VALUE=JackInTheBox>Jack in the Box</option>
<OPTION VALUE=KFC>KFC</option>
<OPTION VALUE=TacoBell>Taco Bell</option>
</SELECT>
<br/><input type=submit value=Choose>
</form>
事实上，即使你在页面中添加了用法说明，仍然有用户不知道如何使用多选列表框。另外，给每个项目增加额外的标题确实会有帮助，但用一个普通的多选列表框能否达到那个目的，我还不能确定。
不过，我确实清楚知道，用一些CSS和一小段JavaScript，你就能生成一个更漂亮一点的多选列表框，并且还可以建立一个等同于普通多选列表框的URL。那样，你就不用修改处理列表框的后端代码——而只需要美化前端即可。
你首先从CSS开始，建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果，当鼠标移动到一个项目上时，背景色就会改变，以突出当前选择。
<style>
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 10em;
overflow: auto;
width: 20em;
}.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding: 0 0.2em 0 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
* html .checklist label { height: 1%; }
</style>
至于JavaScript，你基本上只希望建立一个等同于常规多选列表框的URL。以上面的多选列表框为例，其查询字符串如下：
?favorites=Wendys&favorites=KFC
那就是我们希望仿效的地方。这段脚本只是利用外观(form)对象，循环所有检验栏(checkbox)的thru looking，并为那些选中的项目建立URL。很明显，这段脚本只应用于所有检验栏元素都位于新多选列表框的情况。
<script type=text/javascript>
function submitForm(f) {
var cb = f.getElementsByTagName(input);
var favorites = favorites=;
var isFirst = true;for (var i = 0; i < cb.length; i++) {
var curr = cb[i];
if (curr.type == checkbox) {
// window.alert(curr.name + : + curr.type);
if (curr.checked) {
if (isFirst) {
favorites = favorites= + curr.name;
isFirst = false;
} else {
favorites = favorites + &favorites= + curr.name;
}
}
}
}
window.location = f.action + ? + favorites;
}
</script>
最后，经过简单改进的新多选列表框的代码如下：
<form method=get action=>
<b>Check your favorite fast food:</b><br/>
<ul class=checklist>
<li><label><input type=checkbox name=McDonalds /><b>McDonalds</b><br/>Im lovin it</label></li>
<li><label><input type=checkbox name=BurgerKing /><b>Burger King</b><br/>Have it your way</label></li>
<li><label><input type=checkbox name=Wendys /><b>Wendys</b><br/>Always fresh, never frozen</label></li>
<li><label><input type=checkbox name=JackInTheBox /><b>Jack in the Box</b><br/>If it doesnt get all over the place, it doesnt belong in your face</label></li>
<li><label><input type=checkbox name=KFC /><b>KFC</b><br/>Finger lickin good</label></li>
<li><label><input type=checkbox name=TacoBell /><b>Taco Bell</b><br/>Think outisde the bun</label></li>
</ul>
<input type=button value=Choose onclick=submitForm(this.form);>
</form>
不幸的是，TechRepublic网站大量应用CSS，因此当我在博客中试用这段样本代码时，它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。
因此，我在自己的个人网站上用这段代码发布了一个简单的文件，你可以通过它了解代码的用法
