更新于

select下拉列表移动

发布于 / 分类: 锋利的JQuery,实例 / 暂无评论 / 阅读量: 547

下拉列表平时遇到的少,这里做个笔记先,主要功能就是从左边的select1中将选中的option元素移动到右边的select2中去,其实也很简单,主要是涉及到如何筛选选中的,然后使用到新的一个属性方法prop()。

html:

<div class="centent">
    <select name="" id="select" multiple style="width: 100px;height:160px;">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
      <option value="5">选项5</option>
      <option value="6">选项6</option>
    </select>
    <div class="menu">
      <span id="add">添加选中</span>
      <span id="add_all">全部添加</span>
    </div>
    <select name="" id="select2" multiple style="width: 100px;height:160px;">
      
    </select>
    <div class="menu">
      <span id="remove">删除选中</span>
      <span id="remove_all">全部删除</span>
    </div>
  </div>

css:

.menu {
    display: inline-block;
}
.menu span {
    display: block;
    width: 80px;
    line-height: 30px;
    border: 1px solid #eee;
    background-color: aliceblue;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 10px;
    cursor: pointer;
}
.menu span:active {
    background-color: aqua;
    color: #fff;
}

jq代码:

$(document).ready(function(){
    
    $('#add').click(function(){
        $('#select option:selected').appendTo('#select2').prop('selected',false);
    });
    $('#add_all').click(function(){
        $('#select option').appendTo('#select2').prop('selected',false);
    });
    
    $('#select option').dblclick(function(){
        $(this).appendTo('#select2').prop('selected',false);
    });
    
    $('#remove').click(function(){
        $('#select2 option:selected').appendTo('#select').prop('selected',false);
    });
    
    $('#remove_all').click(function(){
        $('#select2 option').appendTo('#select').prop('selected',false);
    });
})

这里主要讲一下prop()方法还有$()的第二个参数

prop()

该方法主要用于单个属性取值或者属性值为布尔值的属性设置取值。

disabled用于禁用表单元素,一般来是成键值对的形式存在:disabled=“disabled”;但是有的浏览器写一个值就可以了,直接写一个disabled就表示当前表单元素被禁用,当我们使用attr()来获取的时候,有可能会出错,所以jq在1.6的版本加入了这个新的方法,用来解决这种问题。

使用方法和attr()一样,就不赘述了,主要就是他的作用就是处理这种情况,当然你用来代替attr()也行,但是不建议。

$()的第二个参数

其实该方法一直有第二个参数,默认就是document,$(xxx,document);第二个参数可以理解为作用域,类似于下面这种:

var box = document.getElmentById('box');
var p = box.getElmentsBytagName('p')

上面的p就是作用域

那么我们可以给select列表添加一个新的事件,选中option后,双击空白区域可以将选中的option移动到select2中去。

$('#select').dblclick(function(){
  $('option:select',this).appendTo('#select2');
});

这个第二个参数有可能会混淆,因为第一个参数也可以写,逗号隔开

$('#select,#select2')

这里要注意他是在引号里面用逗号隔开,表示获取两个id元素,他们没有任何级联关系,是独立获取保存在同一个jq对象中。

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买