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对象中。