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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery ajax应用总结
Jun 02 Javascript
js重写方法的简单实现
Jul 10 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
vue中的scope使用详解
Oct 29 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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
php中的一些数组排序方法分享
2012/07/20 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
jQuery 1.0.2
2006/10/11 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
js实现随机点名程序
2020/09/17 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python可视化text()函数使用详解
2020/02/11 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
民间借贷被告代理词
2015/05/23 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
作文之亲情600字
2019/09/23 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
java设计模式--原型模式详解
2021/07/21 Java/Android