无为清净楼资源网

jQuery实现下拉框左右选择的简单实例
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com
jQuery实现下拉框左右选择的简单实例

就是实现这个效果的，选中添加到右边，全部添加到右边，选中删除到左边，全部删除到左边。

html部分：
复制代码 代码如下:
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" 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>
            <option value="7">选项7</option>
        </select>
        <div>
            <span id="add" >选中添加到右边&gt;&gt;</span>
            <span id="add_all" >全部添加到右边&gt;&gt;</span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span>
            <span id="remove_all">&lt;&lt;全部删除到左边</span>
        </div>
    </div>
</body>

这里要注意的是select的multiple属性，只有添加了之后，才会在select框中出现多个select选项。
否则只会显示出一条。

jQuery代码解析：
复制代码 代码如下:
<script type="text/javascript">
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项，删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $('#select1').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
</script>

这里要注意的是$("option:selected",this)。这个看起来有点奇怪。其实$()有2个参数，一个是选择器，一个是作用域。 要和$("xxxx,xxx")区分。通常意义下的$('xxxx')其实是默认了第二个作用域。完整说应该是$('xxxx',document)。这里加上this之后，作用域就限制在#select1中或#select2中了。也就是select1中的选中项被添加到#select2的后面。

效果类似于$("#select1 option:selected")。

如果不加上，this这个参数的话，就会牵扯到全局中的选中项。就会出错。

注意点2：

append()与appendTo()方法的区别。

append(content|fn)向每个匹配的元素内部追加内容。

appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中。

前者是向匹配的元素中添加内容的，后者是把匹配的素有元素追加到另一个指定的元素集合中的。

比如$("p").append("<b>Hello</b>");是向p元素中追加内容<b>Hello</b>。

原来的p元素内容：<p>I would like to say: </p>现在的p元素内容：[ <p>I would like to say: <b>Hello</b></p> ]$("p").appendTo("div");将p元素追加到div元素中。原来的内容：<p>I would like to say: </p>
<div></div><div></div>结果：<div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div>

标签：
jQuery,下拉框
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接