用了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();});
