0%

select下拉列表移动

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

最后更新于 2019年09月09日

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

键盘测试触发页面 更新v1.1 jq自动轮播v1.2
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao