这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 实现下拉列表框数据增加、删除、上下排序的方法, 涉及 javascript 针对页面下拉列表框元素的添加、删除及移动的相关技巧, 具有一定参考借鉴, 需要的朋友可以参考下
本文实例讲述了 JavaScript 实现下拉列表框数据增加、删除、上下排序的方法。分享给大家供大家参考。具体如下:
这里实现在一个支持多选的下拉列表框内进行数据项的添加、删除、向上、向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用。
运行效果截图如下:
具体代码如下:
- <title>
- 下拉列表数据上下排序
- </title>
- <SCRIPT LANGUAGE="JavaScript">
- < !--Begin
- function move(fbox, tbox) {
- var i = 0;
- if (fbox.value != "") {
- var no = new Option();
- no.value = fbox.value;
- no.text = fbox.value;
- tbox.options[tbox.options.length] = no;
- fbox.value = "";
- }
- }
- function remove(box) {
- for (var i = 0; i < box.options.length; i++) {
- if (box.options[i].selected && box.options[i] != "") {
- box.options[i].value = "";
- box.options[i].text = "";
- }
- }
- BumpUp(box);
- }
- function BumpUp(abox) {
- for (var i = 0; i < abox.options.length; i++) {
- if (abox.options[i].value == "") {
- for (var j = i; j < abox.options.length - 1; j++) {
- abox.options[j].value = abox.options[j + 1].value;
- abox.options[j].text = abox.options[j + 1].text;
- }
- var ln = i;
- break;
- }
- }
- if (ln < abox.options.length) {
- abox.options.length -= 1;
- BumpUp(abox);
- }
- }
- function Moveup(dbox) {
- for (var i = 0; i < dbox.options.length; i++) {
- if (dbox.options[i].selected && dbox.options[i] != "" && dbox.options[i] != dbox.options[0]) {
- var tmpval = dbox.options[i].value;
- var tmpval2 = dbox.options[i].text;
- dbox.options[i].value = dbox.options[i - 1].value;
- dbox.options[i].text = dbox.options[i - 1].text dbox.options[i - 1].value = tmpval;
- dbox.options[i - 1].text = tmpval2;
- }
- }
- }
- function Movedown(ebox) {
- for (var i = 0; i < ebox.options.length; i++) {
- if (ebox.options[i].selected && ebox.options[i] != "" && ebox.options[i + 1] != ebox.options[ebox.options.length]) {
- var tmpval = ebox.options[i].value;
- var tmpval2 = ebox.options[i].text;
- ebox.options[i].value = ebox.options[i + 1].value;
- ebox.options[i].text = ebox.options[i + 1].text ebox.options[i + 1].value = tmpval;
- ebox.options[i + 1].text = tmpval2;
- }
- }
- }
- // End -->
- </script>
- <form ACTION="" METHOD="POST">
- <table>
- <tr>
- <td>
- <input type="button" value="增加" onclick="move(this.form.list1,this.form.list2)"
- name="B1">
- <br>
- <input type="button" value="删除" onclick="remove(this.form.list2)" name="B2">
- <br>
- <input type="button" value="向上" onclick="Moveup(this.form.list2)" name="B3">
- <br>
- <input type="button" value="向下" onclick="Movedown(this.form.list2)" name="B4">
- </td>
- <td>
- <select multiple size=7 name="list2">
- <option value="one">
- ASP
- </option>
- <option value="two">
- PHP
- </option>
- <option value="three">
- ASP.NET
- </option>
- <option value="four">
- JAVA
- </option>
- <option value="five">
- DELPHI
- </option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- <input type="text" name="list1" value="">
- </td>
- </tr>
- </table>
- </form>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0424/269990.html