js实现人才网站职位选择功能的方法


Posted in Javascript onAugust 14, 2015

本文实例讲述了js实现人才网站职位选择功能的方法。分享给大家供大家参考。具体如下:

这是一个比较实用的JS列表框功能,像很多人才网站的职位选择功能一样,从左侧列表框选择后会添加至右侧列表框,还可以上下移动、增删内容,感觉非常有用的代码。

运行效果如下图所示:

js实现人才网站职位选择功能的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>人才网站的职位选择功能代码</title>
<script>
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;
   }
  }
}
</script>
</head>
<body>
<form ACTION="" METHOD="POST">
 <table align="center">
  <tr>
<td>
<input type="text" name="list1" value="">
</td>
<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><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">DELPHI</option>
<option value="five">VB</option>
<option value="six">AJAX</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
jQuery入门基础知识学习指南
Aug 14 #Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 #Javascript
js实现Select列表各项上移和下移的方法
Aug 14 #Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
php服务器的系统详解
2019/10/12 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python 闭包的使用方法
2017/09/07 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 内置函数汇总详解
2019/09/16 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
css3 transform属性详解
2014/09/30 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
爱国卫生月实施方案
2014/02/21 职场文书
增值税发票丢失证明
2015/06/19 职场文书