制作一个更漂亮一些的多选列表框(2)
作者:Rex Baldrazo 来源:开发者在线 时间:2007-10-16 13:04:00
至于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/>I’m 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>Wendy’s</b><br/>Always fresh, never frozen</label></li>
<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn’t get all over the place, it doesn’t 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,因此当我在博客中试用这段样本代码时,它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。
因此,我在自己的个人网站上用这段代码发布了一个简单的文件,你可以通过它了解代码的用法
标签:列表框,多选,css,avaScript
0
投稿
猜你喜欢
Python3 中文文件读写方法
2021-07-14 20:02:39
Python编写生成验证码的脚本的教程
2021-09-13 14:32:22
PyTorch 可视化工具TensorBoard和Visdom
2022-04-28 00:30:41
安全地关闭MySQL服务的教程
2024-01-16 23:50:13
python面向对象入门教程之从代码复用开始(一)
2022-07-17 21:54:13
SQL Server 2000的视图中必须小心使用*符号
2008-12-05 15:38:00
简洁js的隔行变色代码
2008-06-18 18:17:00
XML教程—编写结构完整的XML文档
2008-10-11 13:43:00
YUI学习笔记(4)
2009-03-10 18:25:00
JS数组中对象去重操作示例
2024-04-18 10:57:31
详解MySQL存储过程参数有三种类型(in、out、inout)
2024-01-25 17:45:12
PHP循环与分支知识点梳理
2023-05-29 13:09:21
基于Python代码实现Apriori 关联规则算法
2021-01-25 11:53:45
搭建vue开发环境
2024-04-09 10:58:27
Windows下MySQL5.6查找my.ini配置文件的方法
2024-01-22 13:32:38
JavaScript打开客户端exe文件的代码
2024-04-17 09:49:27
python实现井字棋游戏
2022-02-27 15:16:49
Python实战之实现康威生命游戏
2022-06-30 14:21:12
PHP实现的随机IP函数【国内IP段】
2024-06-05 09:49:17
解释FCKeditor样式的工作原理
2007-10-11 13:34:00