两个多选select(multiple左右)添加、删除选项和取值实例


Posted in Javascript onMay 12, 2014

不知道怎么描述,就是有两个select下拉,做成文本域那样的,可以从一侧的结果集中选择值,添加到另一侧中;另一侧删掉后,值又重新到结果集那边了。直接看范例演示吧,相信你以前后者以后会用到的!
两个多选select(multiple左右)添加、删除选项和取值实例

不多说了,上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
 $("#car_type_list").dblclick(function(){
  var s_val = this.value;
  if(s_val == '') return;
  $(this).children("option[value='"+s_val+"']").remove();
  $("#car_type").append('<option value="'+s_val+'">'+s_val+'</option>');
  //以下代码作用是 将选择到的值备份到一个id为car_type_val的input中,可以进行传值
  $("#car_type_val").val($("#car_type_val").val()+s_val+"@");
  alert($("#car_type_val").val())
 }); $("#car_type").dblclick(function(){
  var s_val = this.value;
  if(s_val == '') return;
  $(this).children("option[value='"+s_val+"']").remove();
  $("#car_type_list").append('<option value="'+s_val+'">'+s_val+'</option>');
  var now_val = $("#car_type_val").val();
  now_val = now_val.replace(s_val+"@","");
  $("#car_type_val").val(now_val);
  alert($("#car_type_val").val())
 });
}) 
</script>
</head>

<body>
<input type="hidden" name="car_type" value="" id="car_type_val" /><br/>
<select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type">
</select><>
<select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type_list">
  <option value="2014森林人系列">2014森林人系列</option>
  <option value="2014傲虎系列">2014傲虎系列</option>
  <option value="2014力狮系列">2014力狮系列</option>
  <option value="2014XV系列">2014XV系列</option>
  <option value="WRX STI">WRX STI</option>
  <option value="SUBARU BRZ">SUBARU BRZ</option>
  <option value="TRIBECA">TRIBECA</option>
</select>
</body>
</html>

其中“<input type="hidden" name="car_type" value="" id="car_type_val" />”这个的作用相当于是一个容器,提交表单的时候可以传值。到接收值的页面,用相应的语言,比如php,就用explode函数,以“@”为分界分割成一个数组。
Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
javascript轮播图算法
Oct 21 Javascript
vue-dialog的弹出层组件
May 25 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 #Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
如何防止回车(enter)键提交表单
May 11 #Javascript
js取整数、取余数的方法
May 11 #Javascript
You might like
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python中字符串的修改及传参详解
2016/11/30 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
员工评语大全
2014/01/19 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
爱心活动计划书
2014/04/26 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书