selezionare più valori in una casella di selezione multipla con Jquery

Question

Così ho due più caselle selezionate come questo

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

Quello che sto cercando di fare è che quando 'Select' viene cliccato, qualsiasi opzione "# barra "che ha lo stesso valore con un'opzione in" #foo "sarebbe selezionata. In questo caso devono essere selezionati Opt 1 e Opt 2 in "#bar". Non ho idea del perché il mio javascript non funzionerà. So che deve essere qualcosa di molto semplice. Non riesco a vederlo. :( Così la mia funzione Javascript è come segue:

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

UPDATE dopo aver visto l'esempio di KON

DEMO

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

---

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

---

esempio più vecchio utilizzando ogni

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

check this out 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)})) 
    } 
) 
}); 



​