JS 控制 两个ListBox之间选择移动项 (转发)
第一种-文章出处----> www.miniui.com/demo/listbox/moveitems.html
<body>
<h1>两个ListBox之间选择移动项 </h1>
<input type="button" value="Save" onclick="saveData()" style="width:55px;"/>
<table >
<tr>
<td >
<div id="listbox1" class="mini-listbox" style="width:150px;height:150px;"
textField="text" valueField="id" showCheckBox="true" multiSelect="true"
url="../data/countrys.txt">
</div>
</td>
<td style="width:120px;text-align:center;">
<input type="button" value=">" onclick="add()" style="width:40px;"/><br />
<input type="button" value=">>" onclick="addAll()" style="width:40px;"/><br />
<input type="button" value="<<" onclick="removeAll()" style="width:40px;"/><br />
<input type="button" value="<" onclick="removes()" style="width:40px;"/><br />
</td>
<td>
<div id="listbox2" class="mini-listbox" style="width:250px;height:150px;"
showCheckBox="true" multiSelect="true" >
<div property="columns">
<div header="ID" field="id"></div>
<div header="国家" field="text"></div>
</div>
</div>
</td>
<td style="width:50px;text-align:center;vertical-align:bottom">
<input type="button" value="Up" onclick="upItem()" style="width:55px;"/>
<input type="button" value="Down" onclick="downItem()" style="width:55px;"/>
</td>
</tr>
</table>
<script type="text/javascript">
mini.parse();
var listbox1 = mini.get("listbox1");
var listbox2 = mini.get("listbox2");
function add() {
var items = listbox1.getSelecteds();
listbox1.removeItems(items);
listbox2.addItems(items);
}
function addAll() {
var items = listbox1.getData();
listbox1.removeItems(items);
listbox2.addItems(items);
}
function removes() {
var items = listbox2.getSelecteds();
listbox2.removeItems(items);
listbox1.addItems(items);
}
function removeAll() {
var items = listbox2.getData();
listbox2.removeItems(items);
listbox1.addItems(items);
}
function upItem() {
var items = listbox2.getSelecteds();
for (var i = 0, l = items.length; i < l; i++) {
var item = items[i];
var index = listbox2.indexOf(item);
listbox2.moveItem(item, index-1);
}
}
function downItem() {
var items = listbox2.getSelecteds();
for (var i = items.length-1; i >=0; i--) {
var item = items[i];
var index = listbox2.indexOf(item);
listbox2.moveItem(item, index + 1);
}
}
function saveData() {
var data = listbox2.getData();
var json = mini.encode(data);
alert(json);
}
</script>
<div class="description">
<h3>Description</h3>
<p>演示在两个ListBox之间，移动数据。
</p>
</div>
</body>
----------------
第二种，同事写的
<body>
<h1>两个ListBox之间选择移动项 </h1>
<div class="main-content">
<div>
<select id="s1" name="s1" multiple="true" style="height: 150px; width: 180px;white-space: normal;overflow-y:scroll">
<option value="a" style=" float:left;">项目1</option>
<option value="b" style=" float:left;">项目2</option>
<option value="c" style=" float:left;">项目3</option>
<option value="d" style=" float:left;">项目4</option>
<option value="e" style=" float:left;">项目5</option>
<option value="6f" style=" float:left;">项目6</option>
<option value="7h" style=" float:left;">项目7</option>
<option value="8k" style=" float:left;">项目8</option>
<option value="9j" style=" float:left;">项目9</option>
<option value="10l" style="float:left;">项目10</option>
</select>
<input type="button" name="" value=">>" onclick="movetos2();" />
<input type="button" name="" value="<<" onclick="movetos1();" />
<select id="s2" name="s2" multiple="true" style="height: 150px; width:180px;white-space: normal;">
</select>
<input type="button" name="" value="确定" onclick="add()" />
</div>
<div id="ss1" style="height: 50px; width: 180px; border:1px solid #807575;overflow-y: scroll;" >
</div>
</div>
<script type="text/javascript">
function movetos2() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var i;
for (i = 0; i < s1.options.length; i++) {
if (s1.options[i].selected) {
s2.appendChild(s1.options[i]);
}
}
}
function movetos1() {
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var i;
for (i = 0; i < s2.options.length; i++) {
if (s2.options[i].selected) {
s1.appendChild(s2.options[i]);
}
}
}
var htmlArr1 =[];
function add() {
var s2 = document.getElementById("s2");
var ss1 = document.getElementById("ss1");
var i;
var html = "";
htmlArr = [];
ss1.innerHTML = "";
var len = s2.options.length;
for (i = 0; i < len; i++) {
; (function (i) {
//s2.removeChild(s2.options[i]);
html += "<span style='margin-right:4px;'>" + s2.options[i].text + "</span>";
var val = s2.options[i].value;
var text = s2.options[i].text;
var sss =
htmlArr.push(val+':'+text);
if (i == len - 1) {
ss1.innerHTML = html;
$(ss1).data('json', htmlArr);
//ss1.setAttribute("data-json", htmlArr);
}
})(i);
}
}
</script>
</body>