Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make multiple selections and then to pass them to another 'select'?

    Hi!

    I have two ‘select’ boxes in order to chose one or more kinds of product quality. In the first ‘select’ I have several options to chose, and the second ‘select’ is empty. To make the selections, first I select one option from the first ‘select’ box, and then I click the link ‘add’ so that the text selected is showed in the second ‘select’ (with its value behind). And thus for every option I want to select.

    But now, I want that If the user has selected several items from the first select object (with the control key pressed), I want that when the user presses the ‘add’ link, all the selections are passed to the second select object. And I want the same functionality when the user presses the link ‘delete’ to delete several items from the second select.
    How can I do this?

    The code page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <script type="text/javascript">
    function addArticle() {
    
    for(var i=0; i<document.getElementById('selectedCert').length; i++) {
    
     if(document.getElementById('selectedCert').options[i].value == document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].value) {
       alert("Already exists");
       return;
      }
    }
    
    document.getElementById('selectedCert').options[document.getElementById('selectedCert').options.length]=new Option (document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].text, document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].value);
    
    }
    
    
    
     function removeArticle() {
      
       var oChild = document.getElementById('selectedCert').children(document.getElementById('selectedCert').selectedIndex);
       document.getElementById('selectedCert').removeChild(oChild);
     
    }
    
    </script>
    
    <body>
    <table>
    <form name="test">
    <tr>
     <td width="76">
    <select name="QualityCert" size="4" multiple="multiple" style="height:140px;">
    	<option value="10">Quality 1</option>
    	<option value="20">Quality 2</option>
    	<option value="30">Quality 3</option>
    	<option value="40">Quality 4</option>
    	<option value="50">Quality 5</option>
    	<option value="60">Quality 6</option>
    	<option value="70">Quality 7</option>
    	<option value="80">Others</option>
    
    </select>
     </td>
    
    
    
                <td width="76" align="center" valign="top"><p><a href="#" onClick="addArticle();">Add</a>&nbsp;<span>&gt;&gt;</span></p>
            <p><span>&lt;&lt;</span>&nbsp;<a href="#" onClick="removeArticle();">Delete</a></p></td>
                <td width="134" rowspan="2" align="left" valign="top"><select name="selectedCert" size="4" multiple="multiple" style="height:140px;width:75px;">
                </select></td>
    </tr>
    </form>
    </table>
    </body>
    </html>
    Thank you,
    Cesar

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In a recent thread, mqcarpenter posted a question regarding his script. Anyway, his question isn't really relevant here, but the script he had does just what you want.

    You can take a look at it here:
    http://www.gruenebydesign.com/rotc/...edraft2004.html

    (I'm hoping he doesn't mind me posting this, as he's posted it in his threads a few times..).

    I'm not familiar with how it works, however, you can take a look at the source code and see if you can figure it out for yourself.

    Hope that helps,
    Sadiq.

  • #3
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry but I can 't see the page your link refers ( http://www.gruenebydesign.com/rotc/...edraft2004.html ), maybe is not correct. Would you mind repeating the complete address?

    Thank you,
    Cesar

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have seen the page but the javascript function that makes the operations isn' t there. If you select 'view/source code' from the browser you can see the code page, but the javascript function isn' t there because it is using an external 'js' file (<SCRIPT LANGUAGE="JavaScript" SRC="/rotc/js/selectbox.js"></SCRIPT>). So, I need the 'selectbox.js' file to see the javascript function.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks Glenn.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •