你首先从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> |

RSS订阅