jquery获取select项并移动到另一个select里

Q行天下

于 2024-01-25 00:14:46 发布

阅读量474

点赞数 9

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/shanshanqwertyuiop/article/details/135834245

版权

文章描述了如何使用jQuery和Bootstrap5的CSS框架，实现了一个div内的两个select下拉菜单，通过点击按钮，选中的选项能在两个下拉菜单之间移动。

摘要由CSDN通过智能技术生成

用了jquery和bootstrap5。
如下项的左侧可移动到右侧，右侧可移动到左侧。
在这里插入图片描述

div代码如下

 <div class="input-group mb-3">
            <span class="input-group-text">可用节点</span>
            <select class="form-select service-type" id="sel1" multiple size="9" name="sellist1">
                <option value="">全部服务</option>
                <option value="map-rest">地图服务</option>
                <option value="data-rest">数据服务</option>
                <option value="3D-rest">三维服务</option>
                <option value="spatialAnalysis-restjsr">空间分析服务</option>
                <option value="transportNetworkAnalyst-rest">网络分析服务</option>
                <option value="trafficTransferAnalyst-restjsr">交通换乘服务</option>
                <option value="networkAnalyst3D-rest">三维网络分析服务</option>
                <option value="addressMatch-restjsr">地址匹配服务</option>
                <option value="map-restjsr">矢量瓦片服务</option>
                <option value="plot-rest">动态标绘服务</option>
                <option value="wmts100">wmts1.0服务</option>
                <option value="wfs100">wfs1.0服务</option>
                <option value="wfs200">wfs2.0服务</option>
            </select>
            <div class="row" style="padding: 50px">
                <input type="button" class="btn btn-secondary row gx-1 gy-md-5" id="nodetoright" value=">>"></input>
                <input type="button" class="btn btn-secondary row gx-1 gy-md-5" id="nodetoleft" value="<<"></input>
            </div>
            <span class="input-group-text">目标节点</span>
            <select class="form-select service-type" id="sel2" multiple size="9" name="sellist1">
            </select>
        </div>

JS代码如下

   $("#nodetoright").click(function () {
// 获取所有选中的选项
        var selectedOptions = $('#sel1 option:selected');
// 遍历选中的选项并将其添加到目标select元素中
        selectedOptions.each(function () {
            var option = $(this).clone();
            $('#sel2').append(option);
        });
// 从源select元素中移除已选中的选项
        selectedOptions.remove();
    });
    $("#nodetoleft").click(function () {
// 获取所有选中的选项
        var selectedOptions = $('#sel2 option:selected');
// 遍历选中的选项并将其添加到目标select元素中
        selectedOptions.each(function () {
            var option = $(this).clone();
            $('#sel1').append(option);
        });
// 从源select元素中移除已选中的选项
        selectedOptions.remove();
    });