使用jquery来实现两个选择框内容的互移

最新推荐文章于 2022-12-11 12:48:13 发布

hy_timer

最新推荐文章于 2022-12-11 12:48:13 发布

阅读量1k

点赞数 1

分类专栏： JQuery学习文章标签： jquery

本文链接：https://blog.csdn.net/hy_timer/article/details/70232331

版权

JQuery学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天开发项目的时候遇到了一个小问题：实现两个文本框内容列表的互相移动，我刚开始使用了纯js实现的，后来经过公司同事指点，使用jquery来实现这个功能，非常简单。将代码贴出来，供以后复习使用。

最主要的应该是就会要学会灵活的运用jquery的函数库

1.我做了个小demo，先将页面展示出来。

网页源码如下：

<body>
    <div class="content_group">
        <div class="span4">
            <label class="control-label">请选择职业:</label>
            <div class="controls">
                <select id="idList" multiple="multiple" size="5" style="float: left">
                    <option value="1">java开发工程师</option>
                </select>
                <div style="width: 60px;float: left;text-align:center;margin-top:25px;">
                    <input type="button" id="add" value="<<添加" >
                    <input type="button" id="remove" value=">>移除" >
                </div>
                <select id="ids" multiple="multiple" size="5" style="float: left">
                    <option value="2">android开发工程师</option>
                    <option value="3">ios开发工程师</option>
                    <option value="4">php开发工程师</option>
                    <option value="5">c++开发工程师</option>
                </select>
            </div>
        </div>
    </div>
</body>

2.引入jquery插件，然后写添加和移除的功能

使用jquery来实现

$(function(){
    //使用jquery来实现这个功能
    $("#add").click(function() {
        //获取右边文本框的被选中项，这里必须使用:selected来选择，不能使用[selected='selected']来选择
        var selectedOptions = $("#ids > option:selected");
        //获取左边的文本框jquery对象
        var idList = $("#idList");
        //调用append方法就完事了
        idList.append(selectedOptions);
    });
    //移除方法与此类似
    $("#remove").click(function() {
        var selectedOptions = $("#idList > option:selected");
        var ids = $("#ids");
        ids.append(selectedOptions);
    })
});

hy_timer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用jquery来实现两个选择框内容的互移

今天开发项目的时候遇到了一个小问题：实现两个文本框内容列表的互相移动，我刚开始使用了纯js实现的，后来经过公司同事指点，使用jquery来实现这个功能，非常简单。将代码贴出来，供以后复习使用。最主要的应该是就会要学会灵活的运用jquery的函数库1.我做了个小demo，先将页面展示出来。网页源码如下：<body> <div class="content_group"> <di
复制链接

扫一扫

专栏目录