php穿梭框多选,jQuery实现穿梭框效果

本文实例为大家分享了jQuery实现穿梭框效果的具体代码，供大家参考，具体内容如下

简介：今天给大家带来穿梭框的实现

布局的实现

>>>>

<<<<

布局的样式

* {

margin: 0 auto;

padding: 0;

list-style: none;

}

#box {

width: 500px;

display: flex;

justify-content: space-around;

margin-top: 20px;

}

#boxright {

width: 200px;

height: 500px;

border: 1px solid darkcyan;

}

#boxleft {

width: 200px;

height: 500px;

border: 1px solid darkcyan;

}

#boxbtn {

margin: auto;

}

#boxbtn button {

width: 50px;

height: 200ox;

margin-top: 10px;

display: flex;

background: deepskyblue;

cursor: pointer;

color: white;

}

ul li {

height: 30px;

line-height: 30px;

margin-bottom: 2px;

text-align: center;

background: darkgray;

}

form {

text-align: center;

}

.active {

color: white;

background: darkseagreen;

}

代码实现

let arr = [

{ "id": 1, "name": "zhang", "check": false },

{ "id": 2, "name": "liu", "check": false },

{ "id": 3, "name": "guan", "check": false },

{ "id": 4, "name": "zhao", "check": true },

{ "id": 5, "name": "ao", "check": true }

];

$("#add").click(function () {

var name = $("#name").val();

arr.push({ "name": name });

showUL(arr);

})

$(function () {

showUL(arr);

})

function showUL(arr) {

var leftstr = "";

var rightstr = "";

for(let i in arr) {

let { id, name, check } = arr[i];

if (check) {

rightstr += `

${name}

`

} else {

leftstr += `

${name}

`

}

}

$("#left_ul").html(leftstr);

$("#right_ul").html(rightstr);

}

$("#left_ul").on("click", "li", function () {

let index = arr.findIndex((v) => {

return v.id == $(this).attr("_id");

})

if ($(this).hasClass('active')) {

$(this).removeClass('active');

arr[index].check = false;

} else {

$(this).addClass('active');

arr[index].check = true;

}

});

$("#right_ul").on("click", "li", function () {

let index = arr.findIndex((v) => {

return v.id == $(this).attr("_id");

})

if ($(this).hasClass('active')) {

$(this).removeClass('active');

arr[index].check = true;

} else {

$(this).addClass('active');

arr[index].check = false;

}

});

$("#btn_right").click(function () {

if ($("#left_ul .active").length == 0) return false;

showUL(arr);

})

$("#btn_left").click(function () {

if ($("#right_ul .active").length == 0) return false;

showUL(arr);

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。