Menu
Hi sir iam trying to move items from one select box to the other select box with out any duplicacy using javascript only. here i can move the selected items from one select box to the other one without any duplicacy bt i couldn’t move all the items b/w the two select boxes witout duplicacy…here is my code below and any one please tell me where it went wrong…
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<title></title>
<script type=”text/javascript”>
function transferOptions(){
var oSel1 = document.getElementById(‘sel1’);
var oSel2 = document.getElementById(‘sel2’);
var selectedIndexes = getSelectedIndexes(oSel1);
var optionAlreadyExists;
//transfer the selected options to sel2
for(i=0; i < selectedIndexes.length; i++){
optionAlreadyExists = false;
for(j=0; j < oSel2.options.length; j++){ //check if option already exists in sel2
if(oSel1.options[selectedIndexes[i]].value == oSel2.options[j].value){
optionAlreadyExists = true;
j = oSel2.options.length;
}
}
if(!optionAlreadyExists){ //add the new option
var newOpt = new Option(oSel1.options[selectedIndexes[i]].innerHTML,oSel1.options[selectedIndexes[i]].value,false,false);
oSel2.options[oSel2.options.length] = newOpt;
}
}
}
function getSelectedIndexes(oSel){
var selectedIndexes = new Array();
for(i=0; i < oSel.options.length; i++){
if(oSel.options[i].selected){
selectedIndexes.push(i);
}
}
return selectedIndexes;
}
window.onload=function(){
document.getElementById(‘btnTransferOpts’).onclick=transferOptions;
}
// REMOVE **********************************************************
function removeOptions(){
alert(“Hi”);
var oSelr1 = document.getElementById(‘sel1’);
var oSelr2 = document.getElementById(‘sel2’);
var selectedIndexes1 = getSelectedIndexes1(oSelr2);
//alert(selectedIndexes1);
var optionAlreadyExists;
//transfer the selected options to sel1
for(i=0; i < selectedIndexes1.length; i++){
optionAlreadyExists = false;
for(j=0; j < oSelr1.options.length; j++){ //check if option already exists in sel1
//alert(oSelr2.options[selectedIndexes1[i]].value);
//alert(oSelr1.options[j].value);
if(oSelr2.options[selectedIndexes1[i]].value == oSelr1.options[j].value){
optionAlreadyExists = true;
j = oSelr1.options.length;
}
}
//alert(optionAlreadyExists);
if(!optionAlreadyExists){ //add the new option
alert(oSelr2.options[selectedIndexes1[i]].value);
var newOpt1 = new Option(oSelr2.options[selectedIndexes1[i]].innerHTML,oSelr2.options[selectedIndexes1[i]].value,false,false);
//alert(newOpt1);
oSelr1.options[oSelr1.options.length] = newOpt1;
}
}
}
function getSelectedIndexes1(oSel3){
var selectedIndexes1 = new Array();
//alert(selectedIndexes1);
for(i=0; i < oSel3.options.length; i++){
if(oSel3.options[i].selected){
selectedIndexes1.push(i);
//alert(selectedIndexes1.push(i));
}
}
return selectedIndexes1;
}
window.onload=function(){
document.getElementById(‘btnRemoveOpts’).onclick=removeOptions;
}
// TRANSFER ALL **************************************************************************8
function transferallOptions(){
alert(“Hi”);
var tSel1 = document.getElementById(‘sel1’);
var tSel2 = document.getElementById(‘sel2’);
//var moveIndexes = moveIndexes(tSel1);
//alert(moveIndexes);
var optionAlreadyExists;
//alert(tsel1.options.length);
//transfer the selected options to sel2
for(i=0; i < tSel1.options.length; i++){
alert(tsel1.options[i].value);
optionAlreadyExists = false;
for(j=0; j < tSel2.options.length; j++){ //check if option already exists in sel2
alert(tsel2.options[j].value);
if(tSel1.options[i].value == tSel2.options[j].value){
optionAlreadyExists = true;
j = tSel2.options.length;
}
}
alert(optionAlreadyExists);
if(!optionAlreadyExists){ //add the new option
//tSel2.push(tSel1.options[i].value);
var newOptt2 = new Option(tSel1.options[i].innerHTML,tSel1.options[i].value,false,false);
alert(newOptt);
tSel2.options[tSel2.length]=newOptt2;
/*
tSel2.options[tSel2.length] = newOptt;
moveIndexes(tSel2);
}
moveIndexes(tSel2);
}
}
function moveIndexes(tSel){
var moveIndexes = new Array();
for(i=0; i < tSel.options.length; i++){
(
if(tSel.options[i].selected){
moveIndexes.push(i);
}
moveIndexes.push(itSel1.options[i].value);
}
return moveIndexes;
*/
}
window.onload=function(){
document.getElementById(‘btnTransferallOpts’).onclick=transferallOptions;
}
</script>
</head>
<body>
<button id=”btnTransferOpts” onclick=”transferOptions();”>Transfer options</button><br/>
<button id=”btnTransferallOpts” onclick=”transferallOptions();”>Transfer All</button><br/>
<button id=”btnRemoveOpts” onclick=”removeOptions();”>Remove options</button><br/>
<button id=”btnRemoveallOpts” onclick=”removeallOptions();”>Remove All</button>
<select id=”sel1″ multiple=”multiple”>
<option value=”val1″>Item 1</option>
<option value=”val2″>Item 2</option>
<option value=”val3″>Item 3</option>
<option value=”val4″>Item 4</option>
<option value=”val5″>Item 5</option>
<option value=”val6″>Item 6</option>
<option value=”val7″>Item 7</option>
</select>
<select id=”sel2″ multiple=”multiple”>
<option value=”val1″>Item 1</option>
<option value=”val7″>Item 7</option>
<option value=”val8″>Item 8</option>
<option value=”val9″>Item 9</option>
<option value=”val10″>Item 10</option>
</select>
</body>
</html>