两个多选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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
webpack的pitching loader详解
Sep 23 Javascript
javascript实现计算器功能
Mar 30 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP 高手之路(一)
2006/10/09 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python高阶爬虫实战分析
2018/07/29 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python colormap库的安装和使用详情
2020/10/06 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
python re模块和正则表达式
2021/03/24 Python
资产评估专业学生的自我鉴定
2013/11/14 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
简历的自我评价
2014/02/03 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
务虚会发言材料
2014/12/25 职场文书
2015年底工作总结范文
2015/05/15 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python