javascript

Discussion in 'Guidelines / Compliance' started by Geetha Manoharan, Mar 20, 2012.

0
  1. #1
    Hi, Iam trying to move values from one select box to the other..The thing is i should be able to move selected values from select box1 to select box2 and vice versa without any duplicacy using javascript only...

    The script i have tried moves selected values from select box1 to select box2 perfecftly without any duplicacy but it doesnt works when i try to move selected values from select box2 to select box1..Please any one help me to do this..

    My code is,

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title></title>
    <script type="text/javascript">
    function transferOptions(){
    var oSel1 = document.getElementById('sel1');
    var oSel2 = document.getElementById('sel2');
    var selectedIndexes = getSelectedIndexes(oSel1);
    //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].value == oSel2.options[j].value){
    optionAlreadyExists = true;
    j = oSel2.options.length;
    }
    }
    if(!optionAlreadyExists){ //add the new option
    var newOpt = new Option(oSel1.options[selectedIndexes].innerHTML,oSel1.options[selectedIndexes].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.selected){
    selectedIndexes.push(i);
    }
    }
    return selectedIndexes;
    }
    window.onload=function(){
    document.getElementById('btnTransferOpts').onclick=transferOptions;
    }


    // REMOVE **********************************************************

    function transferOptions1(){
    var oSel1 = document.getElementById('sel1');
    var oSel2 = document.getElementById('sel2');
    var selectedIndexes = getSelectedIndexes(oSel2);
    //transfer the selected options to sel2
    for(i=0; i < selectedIndexes.length; i++){
    optionAlreadyExists = false;
    for(j=0; j < oSel1.options.length; j++){ //check if option already exists in sel1
    if(oSel2.options[selectedIndexes].value == oSel1.options[j].value){
    optionAlreadyExists = true;
    j = oSel1.options.length;
    }
    }
    if(!optionAlreadyExists){ //add the new option
    var newOpt = new Option(oSel2.options[selectedIndexes].innerHTML,oSel2.options[selectedIndexes].value,false,false);
    oSel1.options[oSel1.options.length] = newOpt;
    }
    }
    }
    function getSelectedIndexes1(oSel3){
    var selectedIndexes = new Array();
    for(i=0; i < oSel3.options.length; i++){
    if(oSel3.options.selected){
    selectedIndexes.push(i);
    }
    }
    return selectedIndexes1;
    }
    window.onload=function(){
    document.getElementById('btnRemoveOpts').onclick=RemoveOptions;
    }

    </script>
    </head>
    <body>
    <button id="btnTransferOpts" onclick="transferOptions();">Transfer options</button><br/>
    <button id="btnRemoveOpts" onclick="transferOptions1();">Remove options</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="val7">Item 8</option>
    <option value="val7">Item 9</option>
    <option value="val7">Item 10</option>
    </select>
    </body>
    </html>
     
    Geetha Manoharan, Mar 20, 2012 IP