Seleccionar varios valores en una caja de selección múltiple con Jquery

Question

Así que tengo dos cajas de selección múltiple como esta

<select id="foo" multiple="multiple"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

<select id="bar" multiple="multiple"> 
    <option value="1">Opt 1</option> 
    <option value="2">Opt 2</option> 
    <option value="3">Opt 3</option> 
    <option value="4">Opt 4</option> 
</select> 
<a href="#" onclick="select()">Select</a> 

Lo que estoy tratando de hacer es que cuando 'Seleccionar' se hace clic, cualquier opción de "# bar "que tiene el mismo valor con una opción en" #foo "sería seleccionado. En este caso, debe seleccionarse Opt 1 y Opt 2 en "#bar". No tengo idea de por qué mi javascript no funcionará. Sé que debe ser algo muy simple. Simplemente no puedo verlo. :( Así que mi función JavaScript es como sigue:

function select(){ 
    var vals = new Array(); 
    var iter = 0; 
    $("#foo option").each(function(){ 
     var v = $(this).val(); 
     $('#bar option').each(function(){ 
      if ($(this).val() == v) 
      { 
       vals[iter] = v; 
       iter++; 
       break; 
      } 
     }); 
    }); 
    $("#bar").val(vals); 
} 

Answer 1

ACTUALIZACIÓN después de ver el ejemplo de KON

DEMO

$("#sel").click(function(e) { 
    e.preventDefault(); // cancel the link itself 
    $("#bar").val($("#foo").val()); 
}); 

---

<a href="#" id="sel">Select</a> 

---

ejemplo mayor utilizando cada

DEMO

$("#sel").click(function(e) { // when link clicked 
    e.preventDefault(); 
    $("#foo option:selected ").each(function(){ 
    var v = $(this).attr("value"); // first select's value 
    $('#bar option').each(function(){ 
     if ($(this).attr("value") == v) { 
     $(this).attr("selected",true); // select if same value 
     } 
    }); 
    }); 
}) 

Answer 2

mira esto http://jsfiddle.net/NtF8J/

html

<select multiple> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
</select> 

<select multiple> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
</select> 

<button> random </button>​ 

jQuery

$(function(){ 
    $(document.body).delegate(
    'select:first', 'change', function(){ 
     $('select:not(:first)').val(
     $(this).val() 
    ) 
    } 
) 
    .delegate(
    'button', 'click', function(){ 
    $('select').val([1,2,3,4].filter(function(){return!!Math.round(Math.random() * 1)})) 
    } 
) 
}); 



​