两个多选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广告代码
May 30 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
详细分析React 表单与事件
Jul 08 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
再谈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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php socket方式提交的post详解
2008/07/19 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Django csrf 验证问题的实现
2018/10/09 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
财务主管岗位职责
2014/02/28 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
就业导师推荐信范文
2015/03/27 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python