两个多选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过滤html的字符串(注释标记法)
Jul 08 Javascript
屏蔽script注入小例子
Nov 12 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Vue项目中ESlint规范示例代码
Jul 04 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
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Numpy之random函数使用学习
2019/01/29 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
《草原》教学反思
2014/02/15 职场文书
校园绿化美化方案
2014/06/08 职场文书
机电专业求职信
2014/06/14 职场文书
校车安全责任书
2014/08/25 职场文书
公司合并协议书范本
2014/09/30 职场文书
民间借贷协议书范本
2014/10/01 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年教研组工作总结
2014/11/26 职场文书
实施意见格式范本
2015/06/05 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers