when I add a element from right to left I can see element in both view by name and view by code
when I perform delete how to remove value from both the list and disable false for both lists
<form name="adminForm" id="formAdmin" method="post" action="http://localhost:7003/ccrSrc/initAdmin.do">
<table style="margin-top: -15px" cellspacing="0" cellpadding="0" border="0" width="760">
<tbody>
<tr bgcolor="#EEEEEE">
<td width="800" valign="top" style="margin:0px; padding: 0px;">
<table class="orgtable">
<tbody>
<tr>
<td class="tabletitle2" width="40%" nowrap="">Available Orgs:</td>
<td class="tabletitle2" width="20%"> </td>
<td class="tabletitle2" width="40%" nowrap="">Assigned Orgs:</td>
</tr>
<tr>
<!--Available Organizations-->
<td width="40%" class="bodytext6">
<div class="container">
<label class="section-label">Status:</label>
<input class="radioBtn" type="radio" name="status" value="ACTIVE" checked="" onclick="javascript:changeStatus(1);">
<label class="section-label">Active</label>
<input class="radioBtn" type="radio" name="status" value="INACTIVE" onclick="javascript:changeStatus(2);">
<label class="section-label">Inactive</label>
<br/>
<label class="section-label">View:</label>
<input class="radioBtn" type="radio" name="viewGrp" value="BYNAME" checked="" onclick="javascript:changeView('BYNAME');">
<label class="section-label"> Org Name</label>
<input class="radioBtn" type="radio" name="viewGrp" value="BYCODE" onclick="javascript:changeView('BYCODE');">
<label class="section-label">Org Code</label>
</div>
<div id="Status1" style="cursor:default; display: inline;">
<select id="" name="activeChnl" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%">
<option value="1">Accountancy, Banking and Finance</option>
<option value="2">Animal and Plant Resource</option>
<option value="3">Business, Consulting and Management</option>
<option value="4">Charity and Voluntary Work</option>
<option value="5">Creative Arts and Design</option>
<option value="6">Energy and Utilities</option>
<option value="7">Engineering and Manufacturing</option>
<option value="8">Enviromemt amd Agriculture</option>
<option value="9">Healthcare</option>
<option value="10">Hospitality and Events Management</option>
</select>
</div>
<div id="Status2" style="cursor:default; display: none;">
<select name="inactiveChnl" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%">
<option value="11">Information, Research and Analysis</option>
<option value="12">Insurance and Pensions</option>
<option value="13">Law</option>
<option value="14">Law Enforcement and Security</option>
<option value="15">Leisure, Sport and Tourism</option>
<option value="16">Marketing, Advertising and PR</option>
<option value="17">Media and Internet</option>
<option value="18">Performing Arts</option>
<option value="19">Property and Construction</option>
<option value="20">Public Services and Administration</option>
</select>
</div>
<div id="Status3" style="cursor:default; display: none;">
<select name="activeChnlByCode" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%">
<option value="1">001 Accountancy, Banking and Finance</option>
<option value="2">002 Animal and Plant Resource</option>
<option value="3">003 Business, Consulting and Management</option>
<option value="4">004 Charity and Voluntary Work</option>
<option value="5">005 Creative Arts and Design</option>
<option value="6">006 Energy and Utilities</option>
<option value="7">007 Engineering and Manufacturing</option>
<option value="8">008 Enviromemt amd Agriculture</option>
<option value="9">009 Healthcare</option>
<option value="10">010 Hospitality and Events Management</option>
</select>
</div>
<div id="Status4" style="cursor:default; display: none;">
<select name="inactiveChnlByCode" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%">
<option value="11">011 Information, Research and Analysis</option>
<option value="12">012 Insurance and Pensions</option>
<option value="13">013 Law</option>
<option value="14">014 Law Enforcement and Security</option>
<option value="15">015 Leisure, Sport and Tourism</option>
<option value="16">016 Marketing, Advertising and PR</option>
<option value="17">017 Media and Internet</option>
<option value="18">018 Performing Arts</option>
<option value="19">019 Property and Construction</option>
<option value="20">020 Public Services and Administration</option>
</select>
</div>
</td>
<td width="4%" align="center" nowrap="">
<button class="addRemoveBtn" name="btnAdd" type="button">>></button>
<br><br><br>
<button class="addRemoveBtn" name="btnRemove" type="button"><<</button>
</td>
<td width="48%" class="smalltext0">
<div id="activeStatus1" style="cursor: default; display: inline;">
<select name="assignedActiveChnl" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%;height:347px;">
</select>
</div>
<div id="activeStatus2" style="cursor: default; display: none;">
<select name="assignedInactiveChnl" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%;height:347px;">
</select>
</div>
<div id="activeStatus3" style="cursor:default; display: none;">
<select name="assignedActiveChnlByCode" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%;height:347px;">
</select>
</div>
<div id="activeStatus4" style="cursor:default; display: none;">
<select name="assignedInactiveChnlByCode" multiple="multiple" size="25%" style="overflow-x:scroll;width:100%;height:347px;">
</select>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
</td>
<td align="right">
<button id="cancel" style="width:75px;" type="button" onclick="javascript:loadUserOrgAction();">Cancel</button>
<button id="save" style="width:75px;" type="button" onclick="javascript:loadUserOrgAction();">Save</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
below is the JavaScript function for add and remove
when add click is performed i can add value to both assigned list as code and name same behaviour should be work for when i click on remove how can i achieve these ?
var tempAddedActiveOrgs = [];
var tempAddedInactiveOrgs = [];
var tempAddedActiveOrgsByCode = [];
var tempAddedInactiveOrgsByCode = [];
let View1 = true;
let View2 = false;
let Status1 = true;
let Status2 = false;
let ActiveStatus1 = true;
let ActiveStatus2 = false;
function changeStatus(statusId) {
var frm = document.getElementById('formAdmin');
var activChnls = frm.activeChnl;
var inactivChnls = frm.inactiveChnl;
var sectionName = "Status" + statusId;
//reset sections
view1 = false;
document.getElementById("Status1").style.display = 'none';
view2 = false;
document.getElementById("Status2").style.display = 'none';
//display appropriate section
if (sectionName == "Status1") {
Status1 = true;
document.getElementById("Status1").style.display = 'inline';
if (activChnls.length < 1) {
alert('You currently have no Partners assigned. To update your list of assigned Partners, please visit go/updatemyccr and submit a request form.');
disableButtons();
} else if (document.getElementById('formAdmin').viewGrp.value == 'BYNAME') {
document.getElementById("Status1").style.display = 'inline';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'inline';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'none';
} else if (document.getElementById('formAdmin').viewGrp.value == 'BYCODE') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'inline';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'inline';
document.getElementById("activeStatus4").style.display = 'none';
} else {
enableButtons();
activChnls.selectedIndex = "0";
activChnls.focus();
clearSearch();
}
} else if (sectionName == "Status2") {
Status2 = true;
document.getElementById("Status2").style.display = 'inline';
if (inactivChnls.length < 1) {
disableButtons();
} else if (document.getElementById('formAdmin').viewGrp.value == 'BYNAME') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'inline';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'inline';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'none';
} else if (document.getElementById('formAdmin').viewGrp.value == 'BYCODE') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'inline';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'inline';
} else {
enableButtons();
inactivChnls.selectedIndex = "0";
inactivChnls.focus();
clearSearch();
}
} else {
Status1 = true;
document.getElementById("Status1").style.display = 'inline';
statusId = "1";
}
}
function changeView(type) {
if (type == "BYNAME" && document.getElementById('formAdmin').status.value == 'ACTIVE') {
document.getElementById("Status1").style.display = 'inline';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'inline';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'none';
} else if (type == "BYNAME" && document.getElementById('formAdmin').status.value == 'INACTIVE') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'inline';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'inline';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'none';
} else if (type == "BYCODE" && document.getElementById('formAdmin').status.value == 'ACTIVE') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'inline';
document.getElementById("Status4").style.display = 'none';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'inline';
document.getElementById("activeStatus4").style.display = 'none';
} else if (type == "BYCODE" && document.getElementById('formAdmin').status.value == 'INACTIVE') {
document.getElementById("Status1").style.display = 'none';
document.getElementById("Status2").style.display = 'none';
document.getElementById("Status3").style.display = 'none';
document.getElementById("Status4").style.display = 'inline';
document.getElementById("activeStatus1").style.display = 'none';
document.getElementById("activeStatus2").style.display = 'none';
document.getElementById("activeStatus3").style.display = 'none';
document.getElementById("activeStatus4").style.display = 'inline';
}
}
adminForm.btnAdd.onclick = () => {
if (document.getElementById("Status1").style.display == 'inline') {
addActiveChnlOrgs();
} else if (document.getElementById("Status2").style.display == 'inline') {
addInactiveChnlOrgs();
}
}
function addActiveChnlOrgs() {
var frm = document.getElementById('formAdmin');
var assignedActiveChnls = frm.assignedActiveChnl;
var activeChnls = frm.activeChnl;
var activeChnlByCode = frm.activeChnlByCode;
var assignedActiveChnlByCode = frm.assignedActiveChnlByCode;
//adding active selected chnl org by name to assigned chnl org by name
for (i = 0; i < activeChnls.length; i++) {
if (activeChnls[i].selected == true) {
var opt = document.createElement('option');
opt.value = activeChnls[i].value;
opt.innerHTML = activeChnls[i].label;
assignedActiveChnls.appendChild(opt);
if (tempAddedActiveOrgs.indexOf(opt.value) === -1) {
tempAddedActiveOrgs.push(opt.value);
}
activeChnls[i].disabled = true;
}
}
//adding active selected chnl org by name to assigned chnl org by code
for (i = 0; i < activeChnls.length; i++) {
if (activeChnls[i].selected == true) {
for (j = 0; j < activeChnlByCode.length; j++) {
if (activeChnls[i].value == activeChnlByCode[j].value) {
var opt = document.createElement('option');
opt.value = activeChnlByCode[j].value;
opt.innerHTML = activeChnlByCode[j].label;
assignedActiveChnlByCode.appendChild(opt);
if (tempAddedActiveOrgsByCode.indexOf(opt.value) === -1) {
tempAddedActiveOrgsByCode.push(opt.value);
}
activeChnlByCode[j].disabled = true;
}
}
}
}
activeChnls.selectedIndex = -1;
activeChnlByCode.selectedIndex = -1;
sortSelect(assignedActiveChnls);
sortSelect(assignedActiveChnlByCode);
extractLabelForDisplay(assignedActiveChnls);
//color added orgs to blue
for (var i = 0; i < assignedActiveChnls.length; i++) {
for (var j = 0; j < tempAddedActiveOrgs.length; j++) {
if (assignedActiveChnls[i].value == tempAddedActiveOrgs[j]) {
assignedActiveChnls[i].style.color = "blue";
}
}
}
for (var i = 0; i < assignedActiveChnlByCode.length; i++) {
for (var j = 0; j < tempAddedActiveOrgsByCode.length; j++) {
if (assignedActiveChnlByCode[i].value == tempAddedActiveOrgsByCode[j]) {
assignedActiveChnlByCode[i].style.color = "blue";
}
}
}
}
function addActiveChnlOrgsByCode() {
var frm = document.getElementById('formAdmin');
var assignedActiveChnlByCode = frm.assignedActiveChnlByCode;
var activeChnlByCode = frm.activeChnlByCode;
var assignedActiveChnls = frm.assignedActiveChnl;
var activeChnls = frm.activeChnl;
//adding active selected chnl org by code to assigned chnl org by code
for (i = 0; i < activeChnlByCode.length; i++) {
if (activeChnlByCode[i].selected == true) {
var opt = document.createElement('option');
opt.value = activeChnlByCode[i].value;
opt.innerHTML = activeChnlByCode[i].label;
assignedActiveChnlByCode.appendChild(opt);
if (tempAddedActiveOrgsByCode.indexOf(opt.value) === -1) {
tempAddedActiveOrgsByCode.push(opt.value);
}
activeChnlByCode[i].disabled = true;
}
}
//adding active selected chnl org by code to assigned chnl org by name
for (i = 0; i < activeChnlByCode.length; i++) {
if (activeChnlByCode[i].selected == true) {
for (j = 0; j < activeChnls.length; j++) {
if (activeChnlByCode[i].value == activeChnls[j].value) {
var opt = document.createElement('option');
opt.value = activeChnls[j].value;
opt.innerHTML = activeChnls[j].label;
assignedActiveChnls.appendChild(opt);
if (tempAddedActiveOrgs.indexOf(opt.value) === -1) {
tempAddedActiveOrgs.push(opt.value);
}
activeChnls[j].disabled = true;
}
}
}
}
activeChnlByCode.selectedIndex = -1;
activeChnls.selectedIndex = -1;
sortSelect(assignedActiveChnls);
sortSelect(assignedActiveChnlByCode);
extractLabelForDisplay(assignedActiveChnls);
//color added orgs to blue
for (var i = 0; i < assignedActiveChnlByCode.length; i++) {
for (var j = 0; j < tempAddedActiveOrgsByCode.length; j++) {
if (assignedActiveChnlByCode[i].value == tempAddedActiveOrgsByCode[j]) {
assignedActiveChnlByCode[i].style.color = "blue";
}
}
}
for (var i = 0; i < assignedActiveChnls.length; i++) {
for (var j = 0; j < tempAddedActiveOrgs.length; j++) {
if (assignedActiveChnls[i].value == tempAddedActiveOrgs[j]) {
assignedActiveChnls[i].style.color = "blue";
}
}
}
}
adminForm.btnRemove.onclick = () => {
let frm = document.getElementById('formAdmin')
let activeAssignedChnl = frm.assignedActiveChnl;
let inActiveAssignedChnl = frm.assignedInactiveChnl;
let activeAssignedChnlByCode = frm.assignedActiveChnlByCode;
let assignedInactiveChnlByCode = frm.assignedInactiveChnlByCode;
if (document.getElementById("Status1").style.display == 'inline') {
if (activeAssignedChnlByCode.children.length > 0) {
let activeChnlByCode = frm.activeChnlByCode;
for (j = 0; j < activeAssignedChnlByCode.length; j++) {
if (activeChnlByCode[j].value == activeAssignedChnl.value) {
activeChnlByCode[j].disabled = false
}
}
}
if (activeAssignedChnl.children.length > 0) {
let activChnls = frm.activeChnl;
for (i = 0; i < activChnls.length; i++) {
if (activChnls[i].value == activeAssignedChnl.value) {
activChnls[i].disabled = false
activeAssignedChnl.removeChild(
activeAssignedChnl.options[activeAssignedChnl.selectedIndex]
)
}
}
}
} else if (document.getElementById("Status2").style.display == 'inline') {
if (inActiveAssignedChnl.children.length > 0) {
let inactivChnls = frm.inactiveChnl;
for (i = 0; i < inactivChnls.length; i++) {
if (inactivChnls[i].value == inActiveAssignedChnl.value) {
inactivChnls[i].disabled = false
inActiveAssignedChnl.removeChild(
inActiveAssignedChnl.options[inActiveAssignedChnl.selectedIndex]
)
}
}
}
} else if (document.getElementById("Status3").style.display == 'inline') {
if (activeAssignedChnlByCode.children.length > 0) {
let activeChnlByCode = frm.activeChnlByCode;
for (i = 0; i < activeChnlByCode.length; i++) {
if (activeChnlByCode[i].value == activeAssignedChnlByCode.value) {
activeChnlByCode[i].disabled = false
activeAssignedChnlByCode.removeChild(
activeAssignedChnlByCode.options[activeAssignedChnlByCode.selectedIndex]
)
}
}
}
} else if (document.getElementById("Status4").style.display == 'inline') {
if (assignedInactiveChnlByCode.children.length > 0) {
let inactiveChnlByCode = frm.inactiveChnlByCode;
for (i = 0; i < inactiveChnlByCode.length; i++) {
if (inactiveChnlByCode[i].value == assignedInactiveChnlByCode.value) {
inactiveChnlByCode[i].disabled = false
assignedInactiveChnlByCode.removeChild(
assignedInactiveChnlByCode.options[assignedInactiveChnlByCode.selectedIndex]
)
}
}
}
}
adminForm.empNumber.value = document.getElementById("employeeNumberValue").textContent;
clearSearchBoxes();
}