Home/ Questions/Q 6056141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:20:36+00:00

I want to move the selected list items from one block (block 1) another

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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