将选中的值移动到另一个块并将它们附加到
内列表

发布于 2024-11-17 06:48:54 字数 1834 浏览 0 评论 0原文

我想将选定的列表项从一个块（块 1）移动到另一个块（块 2）。移动到块 2 后，如果我从块 2 中删除该项目，它应该附加回块 1。

这是我的代码：

HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
    <td>
        <div id="left">
            <ul>
                <li><input type="checkbox" value="Option 1" onclick="addval(this)" />Option 1</li>
                <li><input type="checkbox" value="Option 2" onclick="addval(this)" />Option 2</li>
            </ul>
        </div>
    </td>
    <td>
        <div id="right">
            <ul>
            </ul>
        </div>
    </td>
</tr>
</table>
</body>
</html>

脚本：

function addval(x){
     values1 = $(x).val();
     $('#right ul').append("<li><img src='http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif' name="+ values1 +" onclick='removeval(this,values1)'></img>"+ values1 +"</li>");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $('#left ul').append("<li><input type='checkbox' value="+ values2 +" name="+ values2 +" onclick='addval(this)' />"+ values2 +"</li>");
     $(y).parent().remove();

 }

CSS：

div { border:1px #ccc solid; height:100px; overflow:auto; width:200px; background:#f1f1f1; }
ul { margin:0; padding:0; }
ul li { list-style:none; }

可以在线获取该项目的工作演示： http://jsfiddle.net/prajan55/maLqV/

请帮忙..提前致谢。

原文

I want to move the selected list items from one block (block 1) another block (block 2). After moving to block 2, if I delete the item from block 2, it should append back to block 1.

Here is my code:

The HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
    <td>
        <div id="left">
            <ul>
                <li><input type="checkbox" value="Option 1" onclick="addval(this)" />Option 1</li>
                <li><input type="checkbox" value="Option 2" onclick="addval(this)" />Option 2</li>
            </ul>
        </div>
    </td>
    <td>
        <div id="right">
            <ul>
            </ul>
        </div>
    </td>
</tr>
</table>
</body>
</html>

The script:

function addval(x){
     values1 = $(x).val();
     $('#right ul').append("<li><img src='http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif' name="+ values1 +" onclick='removeval(this,values1)'></img>"+ values1 +"</li>");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $('#left ul').append("<li><input type='checkbox' value="+ values2 +" name="+ values2 +" onclick='addval(this)' />"+ values2 +"</li>");
     $(y).parent().remove();

 }

The CSS:

div { border:1px #ccc solid; height:100px; overflow:auto; width:200px; background:#f1f1f1; }
ul { margin:0; padding:0; }
ul li { list-style:none; }

Working demo of the same is available online at : http://jsfiddle.net/prajan55/maLqV/

Kindly help.. thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

后知后觉 2024-11-24 06:48:54

你只是错过了一些引言。

看这里： http://jsfiddle.net/maLqV/7/

固定代码：

function addval(x){
     values1 = $(x).val();
     $('#right ul').append("<li><img src='http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif' name='"+ values1 +"' value='" + values1 + "' onclick='removeval(this, \"" + values1 + "\")'></img>"+ values1 +"</li>");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $('#left ul').append("<li><input type='checkbox' value='"+ values2 +"' name='"+ values2 +"' onclick='addval(this)' />"+ values2 +"</li>");
     $(y).parent().remove();

 }

You're just missing a few quotes.

Look here: http://jsfiddle.net/maLqV/7/

Fixed code:

function addval(x){
     values1 = $(x).val();
     $('#right ul').append("<li><img src='http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif' name='"+ values1 +"' value='" + values1 + "' onclick='removeval(this, \"" + values1 + "\")'></img>"+ values1 +"</li>");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $('#left ul').append("<li><input type='checkbox' value='"+ values2 +"' name='"+ values2 +"' onclick='addval(this)' />"+ values2 +"</li>");
     $(y).parent().remove();

 }

回复收藏 0 原文

迎风吟唱 2024-11-24 06:48:54

我可以建议一个稍微不同的实现：

var checkedList = $('#right ul');
var unCheckedList = $('#left  ul');

$('input:checkbox').click(
    function(){
        if (this.checked){
            $(this).closest('li').appendTo(checkedList);
        }
        else if (!this.checked){
            $(this).closest('li').appendTo(unCheckedList);
        }
    });

JS Fiddle demo。

这保留了复选框和文本的详细信息，而您的实现似乎删除了标签或标签中的数字（这似乎已由 @sje397的答案)，而且此版本还允许从元素的 onclick 属性中删除单击处理程序。这可能是也可能不是奖金。

May I suggest a slightly different implementation:

var checkedList = $('#right ul');
var unCheckedList = $('#left  ul');

$('input:checkbox').click(
    function(){
        if (this.checked){
            $(this).closest('li').appendTo(checkedList);
        }
        else if (!this.checked){
            $(this).closest('li').appendTo(unCheckedList);
        }
    });

JS Fiddle demo.

This preserves the details of the checkbox and text, whereas your implementation seemed to remove the label, or the number from the label (which seems to have been resolved by @sje397's answer), but also this version allows for the click handler to be removed from the onclick attribute of the elements. Which may, or may not, be a bonus.

回复收藏 0 原文

~没有更多了~