实现select标签不通过ctrl实现多选,通过点击实现多选
2017-09-21 10:11
295 查看
效果如下
$(function() {
var values = [];
var htmls = [];
var lv = '';
var lh = '';
// 右往左
$("#src-color").on('click', 'option', function() {
if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#src-color>option").length - 1; i++) {
if($("#src-color>option").eq(i).is('.vm')) {
values.push($("#src-color>option").eq(i).attr('value'));
htmls.push($("#src-color>option").eq(i).html());
}
}
lv = values;
lh = htmls
console.log(htmls)
values = [];
htmls = [];
console.log(lv + lh)
});
$('#btn-sel').on('click', function() {
var h = null;
$("#src-color option.vm").remove();
for(var j = 0; j <= lv.length - 1; j++) {
if(h == undefined) {
h = '<option ondblclick="r_t_l(this)" value="' + lv[j] + '">' + lh[j] + '</option>'
} else {
h += '<option ondblclick="r_t_l(this)" value="' + lv[j] + '">' + lh[j] + '</option>'
}
}
// 删除原有元素
//
// 新数组赋值
$('#tar-color').append(h);
console.log($("#tar-color option").length)
h = null;
lv = '';
lh = '';
});
// 左往右
//
var value2 = [];
var html2 = [];
var rv = '';
var rh = '';
$("#tar-color").on('click', 'option', function() {
if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#tar-color>option").length - 1; i++) {
if($("#tar-color>option").eq(i).is('.vm')) {
value2.push($("#tar-color>option").eq(i).attr('value'));
html2.push($("#tar-color>option").eq(i).html());
}
}
rv = value2;
rh = html2
value2 = [];
html2 = [];
console.log(rv + rh);
});
$('#btn-back').on('click', function() {
var h = null;
$("#tar-color option.vm").remove();
for(var j = 0; j <= rv.length - 1; j++) {
if(h == undefined) {
h = '<option ondblclick="l_t_r(this)" value="' + rv[j] + '">' + rh[j] + '</option>'
} else {
h += '<option ondblclick="l_t_r(this)" value="' + rv[j] + '">' + rh[j] + '</option>'
}
}
// 删除原有元素
console.log($("#tar-color").html())
// 新数组赋值
$('#src-color').append(h);
h = null;
rv = '';
rh = '';
console.log(h)
});
$(function() {
var values = [];
var htmls = [];
var lv = '';
var lh = '';
// 右往左
$("#src-color").on('click', 'option', function() {
if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#src-color>option").length - 1; i++) {
if($("#src-color>option").eq(i).is('.vm')) {
values.push($("#src-color>option").eq(i).attr('value'));
htmls.push($("#src-color>option").eq(i).html());
}
}
lv = values;
lh = htmls
console.log(htmls)
values = [];
htmls = [];
console.log(lv + lh)
});
$('#btn-sel').on('click', function() {
var h = null;
$("#src-color option.vm").remove();
for(var j = 0; j <= lv.length - 1; j++) {
if(h == undefined) {
h = '<option ondblclick="r_t_l(this)" value="' + lv[j] + '">' + lh[j] + '</option>'
} else {
h += '<option ondblclick="r_t_l(this)" value="' + lv[j] + '">' + lh[j] + '</option>'
}
}
// 删除原有元素
//
// 新数组赋值
$('#tar-color').append(h);
console.log($("#tar-color option").length)
h = null;
lv = '';
lh = '';
});
// 左往右
//
var value2 = [];
var html2 = [];
var rv = '';
var rh = '';
$("#tar-color").on('click', 'option', function() {
if($(this).is('.vm')){
$(this).removeClass('vm')
}else{
$(this).addClass('vm')
}
for(var i = 0; i <= $("#tar-color>option").length - 1; i++) {
if($("#tar-color>option").eq(i).is('.vm')) {
value2.push($("#tar-color>option").eq(i).attr('value'));
html2.push($("#tar-color>option").eq(i).html());
}
}
rv = value2;
rh = html2
value2 = [];
html2 = [];
console.log(rv + rh);
});
$('#btn-back').on('click', function() {
var h = null;
$("#tar-color option.vm").remove();
for(var j = 0; j <= rv.length - 1; j++) {
if(h == undefined) {
h = '<option ondblclick="l_t_r(this)" value="' + rv[j] + '">' + rh[j] + '</option>'
} else {
h += '<option ondblclick="l_t_r(this)" value="' + rv[j] + '">' + rh[j] + '</option>'
}
}
// 删除原有元素
console.log($("#tar-color").html())
// 新数组赋值
$('#src-color').append(h);
h = null;
rv = '';
rh = '';
console.log(h)
});
相关文章推荐
- 不按Ctrl键实现select标签多选操作
- 通过点击页面中的某个a标签,实现全屏,再次点击退出全屏
- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- 用户在文本框中输入需要转换的十进制数,通过点击3个按钮在标签中显示结果。(点击一个实现一个)
- JavaScript实现通过select标签跳转网页的方法
- Jquery实现对a标签改变选中的背景色 支持多选 再次点击背景色消失
- Android 通过ViewPager实现点击和滑动切换Fragment标签页
- 点击标签,通过jquery.jcarousel动态axaj加载内容,实现跑马灯效果
- php -- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- 通过DELPHI实现对标签的批量打印
- Android实现通过浏览器点击链接打开本地应用(APP)并拿到浏览器传递的数据
- TreeView控件实现按Ctrl和Shift键多选功能
- 通过img标签调用实现静态页面访问次数统计的简单方法
- 通过javascript实现点击一个按钮触发发音的动作
- 本文通过举例的方式来教你如何在Oracle中实现SELECT TOP N的方法(转)
- Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
- angularjs 下实现即可通过select选择 也可以通过input输入
- select实现多选
- bootstrap multiselect 多选下拉框实现代码
- Struts2通过自定义标签实现权限控制的方法