两个SELECT的内容移动以及一个下拉框的联动变化 JQuery JS 操作
jsp文件如下:
<script type="text/javascript" src="<%=CONTEXT_PATH%>/resources/js/bb/vp.ctrl.bb.js"></script>
<script type="text/javascript" src="<%=CONTEXT_PATH%>/jsp/bb/base/ssSheetAllot/editSsSheetAllot.js"></script>
<form name="form" action="#">
<table class="p_tbl_bill" cellspacing="1" cellpadding="0">
<tbody>
<tr class="p_tr_bill">
<td class='vp_caption' colspan="4">[表样分配]</td>
</tr>
<input type="hidden" id="rmenu" name="rmenu"/>
<input type="hidden" id="typesheetid" name="typesheetid" value="<%=UtilPub.checkNull(bean.getTypesheetid())%>"/>
<input type="hidden" id="fileid" name="fileid" value="<%=context.getRequest().getAttribute("fileid")%>">
<input type="hidden" id="shindex" name="shindex" value="<%=context.getRequest().getAttribute("shindex")%>">
<input type="hidden" id="sskeyid" name="sskeyid" value="<%=UtilPub.checkNull(bean.getSskeyid())%>"/>
<input type="hidden" id="sssheetid" name="sssheetid" value="<%=UtilPub.checkNull(bean.getSssheetid())%>"/>
<tr class="p_tr_bill">
<td nowrap class="p_td_bill_lbl" colspan="3" style="width:100px" align="left">
<p align="left">报表单位类型:<input type="text" id="customertypeid" name="customertypeid" class="vp_input"
missingMessage="请选择报表单位类型"></p>
</td>
</tr>
<tr class="p_tr_bill" align="left">
<td nowrap class="p_td_bill_lbl" colspan="3" align="left">
<p align="left">
<input type=radio id="menu1" name="menu" value="0" οnclick="change('menu1')" checked="checked">可用全部表单
<input type=radio id="menu2" name="menu" value="1" οnclick="change('menu2')">分配具体的表单
</p>
</td>
</tr>
<tr class="p_tr_bill">
<td nowrap class="p_td_bill_lbl" style="width:48%" align="left">
<p align="left">可分配表单</p>
<p align="left">
<select id="select1" name="select1" disabled="disabled" align="left" multiple="multiple" size="10" style="width: 200px">
<%
if (sList != null && sList.size() > 0) {
boolean pd = false;
for (int j = 0; j < sList.size(); j++) {
SssheetBean tmp1 = sList.get(j);
if (!pd) {
%>
<%
pd = true;
}
%>
<option id="<%=tmp1.getSssheetid()+"_"+tmp1.getIntindex()%>" value="<%=tmp1.getSssheetid()%>"><%=tmp1.getStrsssheetname()%>
</option>
<%
}
if (pd) {
%>
<%
}
}
%>
</select>
</p>
</td>
<td nowrap class="p_td_bill_lbl" style="width:4%">
<p align="center">
<a id="add1" href="###" class="easyui-linkbutton" style="width:35%" οnclick="AddItem()"> > </a><br>
<a id="add2" href="###" class="easyui-linkbutton" style="width:35%" οnclick="AddAllItem()"> >> </a><br>
<a id="back1" href="###" class="easyui-linkbutton" style="width:35%" οnclick="BackItem()"> < </a><br>
<a id="back2" href="###" class="easyui-linkbutton" style="width:35%" οnclick="BackAllItem()"> << </a>
</p>
</td>
<td nowrap class="p_td_bill_lbl" style="width:48%">
<p align="left">已分配表单</p>
<p align="left">
<select id="sheet2" name="sheet2" disabled="disabled" align="left" multiple="multiple" size="10" style="width: 200px">
</select>
</p>
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
loadTypeSheet();
</script>
js文件如下:
var typeComb;
var select1=document.getElementsByName("select1")[0];
var select2=document.getElementsByName("sheet2")[0];
var arrT = new Array(); //单位类型的数组
var arrS = new Array(); //可分配表单的数组
var dqString = "";
var dqNum=0;
page = $.extend(page, {
vp_init:function () {
typeComb = vp.ctrl.bb.typeCombo({
listId:"customertypeid",
onChange:function (newValue, oldValue) {
var pd = true;
var i;
for (i = 0; i < arrT.length; i++) {
if (arrT[i] == newValue) {
pd = false;
dqString = arrS[i];
break;
}
}
if (pd) {
arrT[i] = newValue;
arrS[i] = "";
dqString = arrS[i];
}
dqNum=i;
typeChange();
}
});
select1=document.getElementsByName("select1")[0];
select2=document.getElementsByName("sheet2")[0];
},
//从json对象给页面输入框赋值
loadData:function (data) {
$("#sskeyid").val(data["sskeyid"]);
$("#sssheetid").val(data["sssheetid"]);
$("#typesheetid").val(data["typesheetid"]);
},
//保存校验
checkValid:function () {
$("#typesheetid").val("");
for(var i=1;i<arrT.length;i++){
$("#typesheetid").val($("#typesheetid").val()+arrT[i]+":"+arrS[i]+"|");
}
return true;
}
});
function loadTypeSheet(){
var tempid ;
if($("#typesheetid").val()!=""){
// alert($("#typesheetid").val());
tempid =$("#typesheetid").val().split("|");
for(var i=0;i<tempid.length;i++){
if(tempid[i]!=null&&tempid[i]!=""){
var typeid=tempid[i].split(":");
arrT[i]=typeid[0];
arrS[i]=typeid[1];
}
}
change("menu2");
}
}
function change(name) {
if (name == "menu1") {
document.all.menu1.checked = "checked";
document.all.add1.disabled = "true";
document.all.add2.disabled = "true";
document.all.back1.disabled = "true";
document.all.back2.disabled = "true";
document.all.select1.disabled = "disabled";
document.all.sheet2.disabled = "disabled";
document.all.rmenu.value = "0";
} else {
document.all.menu2.checked = "checked";
document.all.add1.disabled = "";
document.all.add2.disabled = "";
document.all.back1.disabled = "";
document.all.back2.disabled = "";
document.all.select1.disabled = "";
document.all.sheet2.disabled = "";
document.all.rmenu.value = "1";
}
}
function typeChange(obj) {
var temp = dqString.split(",");
select2=document.getElementsByName("sheet2")[0];
select1=document.getElementsByName("select1")[0];
clearItem(select2);
if (temp.length > 0) {
for (var i = 0; i < temp.length; i++) {
if (temp[i] != "") {
for (var j = 0; j < select1.options.length; j++) {
if(select1.options[j].value==temp[i]){
var item=new Option(select1.options[j].text, select1.options[j].value);
select2.options.add(item);
break;
}
}
}
}
}
}
function clearItem(obj){
if(obj.options.length>0){
for(var i=obj.options.length-1;i>=0;i--){
obj.options.remove(i);
}
}
}
//分配新的表单
function AddItem() {
for (var i = 0; i < select1.options.length; i++) {
if (select1.options[i].selected == true) {
var pd=true;
for(var j=0;j<select2.options.length;j++){
if(select2.options[j].value==select1.options[i].value){
pd=false;
break;
}
}
if(pd){
var selectItem = new Option(select1.options[i].text, select1.options[i].value);
select2.options.add(selectItem);
dqString+=select1.options[i].value+",";
}
}
}
arrS[dqNum]=dqString;
}
//
function AddAllItem() {
for (var i = select1.options.length-1; i >=0 ; i--) {
if (select1.options[i].selected == true) {
var pd=true;
for(var j = select2.options.length-1;j>=0;j--){
if(select2.options[j].value==select1.options[i].value){
pd=false;
break;
}
}
if(pd){
var selectItem = new Option(select1.options[i].text, select1.options[i].value);
select2.options.add(selectItem);
dqString+=select1.options[i].value+",";
}
}
}
arrS[dqNum]=dqString;
}
function BackItem() {
for (var i = select2.options.length-1; i >=0; i--) {
if (select2.options[i].selected == true) {
dqString=dqString.replace(select2.options[i].value+",","");
select2.options.remove(i);
}
}
arrS[dqNum]=dqString;
}
//
function BackAllItem() {
for (var i = select2.options.length-1; i >=0; i--) {
//if (select2.options[i].selected == true) {
dqString=dqString.replace(select2.options[i].value+",","");
select2.options.remove(i);
//}
}
arrS[dqNum]=dqString;
}
//OPTION排序
function sortItem(objTo) {
var ln = objTo.options.length;
var arrText = new Array();
var arrValue = new Array();
for (var i = 0; i < ln; i++) {
arrText[i] = objTo.options[i].text;
}
arrText.sort();
for (var i = 0; i < ln; i++) {
for (var j = 0; j < objTo.options.length; j++) {
if (arrText[i] == objTo.options[j].text) {
arrValue[i] = objTo.options[j].value;
break;
}
}
}
while (ln--) {
objTo.options[ln] = null;
}
for (i = 0; i < arrText.length; i++) {
objTo.add(new Option(arrText[i], arrValue[i]));
}
}