两个多选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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
node.js实现爬虫教程
Aug 25 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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类继承 extends使用介绍
2014/01/14 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
10条php编程小技巧
2015/07/07 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
python删除某个字符
2018/03/19 Python
python中sys.argv函数精简概括
2018/07/08 Python
python实现接口并发测试脚本
2019/06/25 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
自考生毕业自我鉴定
2013/10/10 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
运动会解说词100字
2014/01/31 职场文书
爱国口号
2014/06/19 职场文书
运动会演讲稿50字
2014/08/25 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
公司员工培训管理制度
2015/08/04 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers