• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

select下拉列表移动

下拉列表平时遇到的少,这里做个笔记先,主要功能就是从左边的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对象中。

0
  • 本文分类:实例锋利的JQuery
  • 本文标签:select
  • 流行热度:已超过 585 人围观了本文
  • 最后更新:2019年09月9日 - 21时34分09秒
  • 发布日期:2019年09月9日 - 21时32分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码