SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to sync selected values in two html listbox

    Hi all ,
    I have to to HTML listboxes one hold name of people and other hold their emails I want to ask is their away to sync the selected index between listbox a and b like if the user select a name on A listbox his email should be selected on B list box. I made it selected the name from list box a

    I have post the HTML and JavaScript codes


    Code:
    html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head>
    
    <script language="JavaScript">
    <!--
    
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Usage:
         var selectedItemList = getListBoxSelections(names.ClientID);
         var selectedItemArray = selectedItemList.split(',');
         for (var i=0; i<selectedItemArray.length; i++)
         {
          var selectedItem = selectedItemArray[i];
          alert('#' + i + ': ' + selectedItem);
         }
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
      function getListBoxSelections(names) {
        
            var listBoxRef = document.getElementById(names);
            var functionReturn = '';
    
            for (var i = 0; i < listBoxRef.options.length; i++) {
                if (listBoxRef.options[i].selected) {
    
                    if (functionReturn.length > 0)
                        functionReturn += ',';
    
                    // If you want the text property use this:
                    //functionReturn += listBoxRef.options[i].text;
    
    
                    // If you want the value property use this:
                    functionReturn += listBoxRef.options[i].value;
    
                }
            }
    
            return functionReturn;
        }
    
      
    // -->
    </script>
    <body>
    <select id='names' name ='names' style = "width: 100" multiple="multiple">
        <option value ="joe">joe</option>
        <option value ="albert">albert</option>
        <option value ="gary">gary</option>
        <option value ="ace">ace</option>
    </select>
    
    <select id="emails" name ="emails" style = "width: 100;"  multiple="multiple">
        <option value ="joe@asds.com">joe</option>
        <option value ="albert@asds.com">albert</option>
        <option value ="gary@asds.com">gary</option>
        <option value ="ace@asds.com">ace</option>
    </SELECT>
        <input id="Button1" type="button" value="button" onclick="getListBoxSelections(listBox1) " />
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Copy and paste this example into an html file and try it out. I believe this does what you want, but I'm wondering why you can't just make the email address be the value and the name be the label and just select that name for the email you want? Anyway this will allow you to click a name in the first box and get the correct value in the second box. It assumes all name values are unique as if there are duplicates it will only choose the first one it comes to in the second list. If you have any questions let me know.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head>
    
    <script language="JavaScript">
    <!--
    
    function SelectEmail(name)
    {
    	var listboxEmails = document.getElementById('emails');
    	for (var i=0;i<listboxEmails.length;i++)
    	{
    		listboxname = listboxEmails[i].innerHTML
    		if (listboxname == name)
    		{
    			listboxEmails.selectedIndex = i;
    			break;
    		}
    	}//end for 
    }//end function SelectEmail
      
    // -->
    </script>
    <body>
    <select id='names' name ='names' style = "width: 100" multiple="multiple" onClick="SelectEmail(this.value);">
        <option value ="joe">joe</option>
        <option value ="albert">albert</option>
        <option value ="gary">gary</option>
        <option value ="ace">ace</option>
    </select>
    
    <select id="emails" name ="emails" style = "width: 100;"  multiple="multiple">
        <option value ="joe@asds.com">joe</option>
        <option value ="albert@asds.com">albert</option>
        <option value ="gary@asds.com">gary</option>
        <option value ="ace@asds.com">ace</option>
    </SELECT>
    </body>
    </html>
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks tacodomains the code is working fine but how can you make it select more than one

  4. #4
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Sorry for not getting back here sooner. To select multiple values in the target list box you would need to modify the SelectEmail function to select multiple values. If you know which values you are selecting then you could use the same loop like I already had and modify it to check the values you want. You would want to select each value using a statement like this:

    Code:
    listboxEmails.options[i].selected = true;
    From my previous example the following loop snippet would select all items in the target select list:

    Code:
    	for (var i=0;i<listboxEmails.length;i++)
    	{
    		listboxname = listboxEmails[i].innerHTML		
    		listboxEmails.options[i].selected = true;
    
    	}//end for
    Again you would need to modify it to check for each value you would want to select. If you are selecting multiple values in the first list and those are the ones you want to select in the second list then you could modify the JavaScript function to check for all selected values in the first list and then select the same ones in the second list. If you need help determining the values in the first list let me know or Google it for an example.
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.


Bookmarks

Posting Permissions

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