JS实现多选框添加删除
2017-12-22 本文已影响0人
降龙十八段
需求背景：需要实现小组管理(不多介绍)
image.png
数据超出长度显示省略号
.memname {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width: 300px;
white-space: nowrap;
}
image.png
如下实现左右按钮移动：
<body onload="groupname.focus();">
<main>
<div class="newgrouppage">
<div class="newgrouptitle">
<span class="newtitle">新建小组</span>
</div>
<div class="newform">
<portlet:actionURL name="/NewOrUpdateExperGroup" var="newExperGroupUrl"/>
<form class="newgroupform" name="form1" method="post" action="${newExperGroupUrl}">
小组名称：<input type="text" class="groupname" id ="groupname" name="groupname" value="${experGroup.name }" onBlur="checkNull()"/> <span class="info" id="info"></span>
<input type="hidden" id="userids" name="userids" value=""/>
<input type="hidden" id="groupId" name="groupId" value="${experGroup.group_id }"/>
<br/>
<div class="selectbox">
<span class="seletword">添加成员：</span>
<div class="select-bar">
<select multiple="multiple" class="studentselect" name="sel_place1">
<c:forEach var="s" items="${toSelectedList}" varStatus="status">
<option value="${s.user_id }">${s.user_name }</option>
</c:forEach>
</select>
</div>
<div class="option">
<input type="button" class="addstudent" onClick="moveSelected(document.form1.sel_place1,document.form1.sel_place2);" value="> ">
</input>
<input type="button" class="removestudent" onClick="moveSelected(document.form1.sel_place2,document.form1.sel_place1);" value="< ">
</input>
</div>
<div class="select-bar">
<select multiple="multiple" class="studentselected" name="sel_place2">
<c:forEach var="s" items="${selectedList}" varStatus="status">
<option value="${s.user_id }">${s.user_name }</option>
</c:forEach>
</select>
</div>
</div>
<div class="operator">
<input type="submit" value="保存" class="submit" >
<a href="/groupmanage" class="" ><input type="reset" value="取消" class="reset"></a>
</div>
</form>
</div>
</div>
</main>
<script type="text/javascript">
$(document).ready(function(){
var useridss ="'";
var length = document.form1.sel_place2.options.length;
for(var i=0; i<length-1; i++)
{
useridss += document.form1.sel_place2.options[i].value +"','";
}
useridss += document.form1.sel_place2.options[length-1].value + "'";
document.getElementById("userids").value = useridss;
});
function moveSelected(oSourceSel,oTargetSel)
{
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//此数组存贮选中的options，以value来对应
var arrValueTextRelation = new Array();
var index = 0;//用来辅助建立缓存数组
var userids ="'";
//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
for(var i=0; i<oSourceSel.options.length; i++)
{
if(oSourceSel.options[i].selected)
{
//存储
arrSelValue[index] = oSourceSel.options[i].value;
arrSelText[index] = oSourceSel.options[i].text;
//建立value和选中option的对应关系
arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
index ++;
}
}
//增加缓存的数据到目的列表框中，并删除源列表框中的对应项
for(var i=0; i<arrSelText.length; i++)
{
//增加
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
//删除源列表框中的对应项
oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
var length = document.form1.sel_place2.options.length;
for(var i=0; i<length-1; i++)
{
userids += document.form1.sel_place2.options[i].value +"','";
}
userids += document.form1.sel_place2.options[length-1].value + "'";
document.getElementById("userids").value = userids;
}
function checkNull(){
var groupname = document.getElementById("groupname").value;
var info = "";
if(groupname == ""){
// alert("实验名称不能为空！");
document.getElementById("info").innerHTML = "*实验名称不能为空！";
document.getElementById("groupname").focus();
}else{
document.getElementById("info").innerHTML = "";
}
}
</script>
</body>
