脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 两个多选select添加、删除选项和取值

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

 更新时间：2014年05月12日 08:56:18   作者：  
这篇文章主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下

不知道怎么描述，就是有两个select下拉，做成文本域那样的，可以从一侧的结果集中选择值，添加到另一侧中；另一侧删掉后，值又重新到结果集那边了。直接看范例演示吧，相信你以前后者以后会用到的！

不多说了，上代码：

复制代码 代码如下:

<!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函数，以“@”为分界分割成一个数组。

您可能感兴趣的文章:

相关文章

  • jQuery 自定义下拉框(DropDown)附源码下载

    jQuery 自定义下拉框(DropDown)附源码下载

    这篇文章主要介绍了jQuery 自定义下拉框(DropDown)的相关资料,需要的朋友可以参考下
    2016-07-07
  • 详解jQuery中的deferred对象的使用（一）

    详解jQuery中的deferred对象的使用（一）

    deferred对象是jQuery对Promises接口的实现。接下来通过本文给大家详解介绍jQuery中的deferred对象的使用（一），需要的朋友一起学习吧
    2016-05-05
  • jquery单击事件和双击事件冲突解决方案

    jquery单击事件和双击事件冲突解决方案

    这篇文章主要为大家分享了jquery单击和双击事件冲突解决方案，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Jquery获得控件值的三种方法总结

    Jquery获得控件值的三种方法总结

    本篇文章主要是对Jquery获得控件值的三种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jquery 中toggle的2种用法详解(推荐)

    jquery 中toggle的2种用法详解(推荐)

    下面小编就为大家带来一篇jquery 中toggle的2种用法详解(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 浅谈jquery高级方法描述与应用

    浅谈jquery高级方法描述与应用

    下面小编就为大家带来一篇浅谈jquery高级方法描述与应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jQuery.prototype.init选择器构造函数源码思路分析

    jQuery.prototype.init选择器构造函数源码思路分析

    jQuery的核心思想可以简单概括为“查询和操作dom”，今天主要是分析一下jQuery.prototype.init选择器构造函数，处理选择器函数中的参数,感兴趣的朋友可以了解下，或许本文所提供的知识对你学习有所帮助
    2013-02-02
  • jQuery插件实现图片轮播特效

    jQuery插件实现图片轮播特效

    浏览各大网站，很多都少不了轮播效果，如何控制这些图片在一个方向上连续的滚动？这篇文章就为为大家详细介绍了jQuery插件实现图片轮播特效的代码，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery轻量级表单模型验证插件

    jQuery轻量级表单模型验证插件

    这篇文章主要介绍了jQuery轻量级表单模型验证插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Jquery AJAX POST与GET之间的区别

    Jquery AJAX POST与GET之间的区别

    本文是对Jquery中AJAX POST与GET之间的区别。进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11

最新评论