<html>
<head>
<script>
var datas = [
{id:'1',name:'华厦红利'},
{id:'2',name:'茂业集团'},
{id:'3',name:'成商集团'}
];
var selectedIdx = {};
function addCompare(fid){
if( selectedIdx[fid] || getSelectedItems().length == 2 ) return;
var ul = document.getElementById("compareItems");
for(var i = 0; i < datas.length; i ++ ){
if( datas[i].id == fid ){
var li = document.createElement('li');
var liid = datas[i].id;
li.id = liid;
var str = datas[i].name + ' <button οnclick="removeLI(/''+ liid + '/')">移除</button>';
li.innerHTML = str;
ul.appendChild(li);
selectedIdx[datas[i].id] = datas[i].id;
break;
}
}
}
function removeLI(liid){
var ul = document.getElementById("compareItems");
var li = document.getElementById(liid);
if( li ){
ul.removeChild(li);
delete selectedIdx[liid];
}
}
function clearItems(){
selectedIdx = {};
var ul = document.getElementById("compareItems");
ul.innerHTML = '';
}
function getSelectedItems(){
var result = [];
var tmp = {};
for(var p in selectedIdx){
if( tmp[p] != selectedIdx[p] ){
result.push(p);
}
}
return result;
}
</script>
</head>
<body>
<div style="width:90px;height:25px;border:2px solid orange;float:left;text-align:center">对比栏</div>
<div style="width:200px;height:400px;border:1px solid black;clear:left;float:left;position:relative;padding:4px">
<input id="input_id"> <button οnclick="addCompare(document.getElementById('input_id').value)">添加</button>
<ul id="compareItems" style="display:block;list-style:none;width:100%">
</ul>
<br>
<button οnclick="alert(getSelectedItems())">开始比较</button> <button οnclick="clearItems()">消除</button>
</div>
</body>
</html>