1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

javascript

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

  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