Multiple Selection in javascript

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • NiLaY
    #1

    Multiple Selection in javascript

    I have a function like the one below to move a selected option from
    one listbox to another. But I want to be able to select multiple and
    be able to move those selections to the other listbox. Can anyone help
    me on that.
    Thank you

    <html>
    <head>
    <script language="JavaS cript">
    function addOption(sBox, aBox) {

    //onClick="addOpt ion(document.fo rms[0].name+'.selecte d_us',
    document.forms[0].name+'.availab le_us');">
    //onClick="output Selected(docume nt.forms[0].select.options )">
    var checkFlag=true;
    var dummVal;
    var pElem;
    var pOptionVal;
    var pOptionText;
    pElem = eval("document. "+sBox);
    pOptionVal = eval("document. "+aBox+".value" );
    //alert("selected items:\n" + pOptionVal);
    if (pOptionVal != ""){
    pOptionText = eval("document. "+aBox+"[document."+aBox +".selectedInde x].text");
    for (x = 0; x < pElem.length; x++) {
    dummVal= pElem[x].value;
    if ( pOptionVal == dummVal){
    checkFlag=false ;
    }
    }
    if (checkFlag){
    if (pElem.length== 1){
    if (pElem[0].value =="NONE"){
    pElem[0]=null;
    }
    }
    pElem[pElem.length] = new Option(pOptionT ext, pOptionVal, false,
    false);
    }
    }
    return checkFlag;
    }
    </script>
    <title>Untitl ed Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1254">
    </head>

    <body>
    <form name="form1" method="post" action="">
    <select multiple size="4" name="select">
    <option value="1Nilay" >Nilay1</option>
    <option value="2Nilay"> Nilay2</option>
    <option value="3Nilay"> Nilay3</option>
    <option value="4Nilay"> Nilay4</option>
    <option value="5Nilay"> Nilay5</option>
    </select>
    <input type="button" name="Submit" value="Selected list items"
    onClick="addOpt ion(document.fo rms[0].name+'.select2 ',
    document.forms[0].name+'.select' );">
    <select size="4" name="select2">
    </select>
    </form>
    </body>
    </html>
    Tags: None
    • Michael Winter
      #2
      Re: Multiple Selection in javascript

      On 27 Aug 2004 06:34:34 -0700, NiLaY <abcd_2555@hotm ail.com> wrote:
      [color=blue]
      > I have a function like the one below to move a selected option from one
      > listbox to another. But I want to be able to select multiple and be able
      > to move those selections to the other listbox. Can anyone help me on
      > that.[/color]

      I've provided an example at the following address:

      <URL:http://www.mlwinter.pw p.blueyonder.co .uk/clj/select/>

      I've tested it on Opera, IE, Mozilla and NN4 and it works without any
      problems. Unfortunately, the mark-up isn't valid as a SELECT element must
      always have at least one OPTION element.

      If I may, I'd like to make a few comments about your posted code.
      [color=blue]
      > <html>
      > <head>
      > <script language="JavaS cript">[/color]

      The language attribute has been deprecated in favour of the (required)
      type attribute. The language attribute should not be used any more.

      <script type="text/javascript">
      [color=blue]
      > function addOption(sBox, aBox) {[/color]

      [snip]
      [color=blue]
      > pElem = eval("document. "+sBox);
      > pOptionVal = eval("document. "+aBox+".value" );[/color]

      You've done some very strange things with your function parameters which
      makes those eval() call necessary. Really, they shouldn't be; eval() is
      almost always the wrong thing to do, with faster, less error-prone
      solutions available.

      What you should have done was passed three arguments: the form, the first
      box, and the second box. Assuming you changed the function signature to:

      addOption(frm, src, dest)

      You could write:

      var oForm = document.forms[frm], // reference to the form
      oSrc = oForm.elements[src],
      oDest = oForm.elements[dest];

      pOptionVal = oSrc.value;
      [color=blue]
      > //alert("selected items:\n" + pOptionVal);
      > if (pOptionVal != ""){
      > pOptionText =
      > eval("document. "+aBox+"[document."+aBox +".selectedInde x].text");[/color]

      Based on the changes above, you could replace that with:

      pOptionText = oSrc[oSrc.selectedIn dex].text;

      [snip]
      [color=blue]
      > <meta http-equiv="Content-Type" content="text/html;
      > charset=windows-1254">[/color]

      I think it would be a good idea to steer clear of Windows character sets.
      Not everyone uses Windows! For most purposes, ISO-8859-1 (Latin) or ASCII
      (though I forget it's character set name) would be better.

      [snip]
      [color=blue]
      > <input type="button" name="Submit" value="Selected list items"
      > onClick="addOpt ion(document.fo rms[0].name+'.select2 ',
      > document.forms[0].name+'.select' );">[/color]

      To accomodate the changes I've put forward, this would become:

      <input ... onclick="addOpt ion('form1','se lect','select2' );">

      [snip]

      Hope that helps,
      Mike

      --
      Michael Winter
      Replace ".invalid" with ".uk" to reply by e-mail.

        Comment

        Previous template Next
        Working...