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


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>


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.

<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>

thanks tacodomains the code is working fine but how can you make it select more than one

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:

listboxEmails.options[i].selected = true;

From my previous example the following loop snippet would select all items in the target select list:

	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.