选择它们后，将用户名存储在数组中

Question

我有用户名和过滤器列表： documentation

如果我想添加某人，请检查用户名，并将名称转到“所选用户”列表：

但问题是，如果我选择任何过滤器并选择任何用户以前的用户从“选定用户”列表中消失：

以下是我在列表中显示用户的代码：

var cloudbox = document.getElementById('cloudboxmini');
$(".fltr").click(function() {
if($(this).is(":checked")){
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
      console.log(e.dataset.username);
    return e.dataset.username;
  });      
  cloudbox.innerHTML = "<ul><li>" + arr.join('</li><li>') + "</li></ul>";
}    
} );

有没有办法保存以前的名字？也许临时存储所有选定的名称，然后从那里打印出来。

Answer 1

您可以使用localStorage在Javascript中存储任何内容。适用于所有浏览器本地。

Answer 2

检查这可能会给你任何想法

 $('.check').click(function(){
		html = $(this).siblings('span').html();
		if($(this).prop('checked') == true){
			var selectecd = '<tr align="center" class="'+html+'"><th>'+html+'</th></tr>';
			$('#selected').append(selectecd);
		}
		else $('.'+html).remove();
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table width="100%">
	<tr>
    	<td>
        	<table align="center" width="80%" border="1">
                <thead>
                    <tr align="center">
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                        <td>E</td>
                    </tr>
                </thead>
                <tbody>
                    <tr align="center">
                        <td><input type="checkbox" class="check" /> <span>Aa</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ba</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ca</span></td>
                        <td><input type="checkbox" class="check" /> <span>Da</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ea</span></td>
                    </tr>
                    <tr align="center">
                        <td><input type="checkbox" class="check" /> <span>Ab</span></td>
                        <td><input type="checkbox" class="check" /> <span>Bb</span></td>
                        <td><input type="checkbox" class="check" /> <span>Cb</span></td>
                        <td><input type="checkbox" class="check" /> <span>Db</span></td>
                        <td><input type="checkbox" class="check" /> <span>Eb</span></td>
                    </tr>
                    <tr align="center">
                        <td><input type="checkbox" class="check" /> <span>Ac</span></td>
                        <td><input type="checkbox" class="check" /> <span>Bc</span></td>
                        <td><input type="checkbox" class="check" /> <span>Cc</span></td>
                        <td><input type="checkbox" class="check" /> <span>Dc</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ec</span></td>
                    </tr>
                    <tr align="center">
                        <td><input type="checkbox" class="check" /> <span>Ad</span></td>
                        <td><input type="checkbox" class="check" /> <span>Bd</span></td>
                        <td><input type="checkbox" class="check" /> <span>Cd</span></td>
                        <td><input type="checkbox" class="check" /> <span>Dd</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ed</span></td>
                    </tr>
                    <tr align="center">
                        <td><input type="checkbox" class="check" /> <span>Ae</span></td>
                        <td><input type="checkbox" class="check" /> <span>Be</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ce</span></td>
                        <td><input type="checkbox" class="check" /> <span>De</span></td>
                        <td><input type="checkbox" class="check" /> <span>Ee</span></td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td>
            <table width="20%" id="selected">
            	<tr align="center"><th>Selected</th></tr>
            </table>
        </td>
    </tr>
</table>