Выберите несколько значений в поле множественного выбора с помощью Jquery

Итак, у меня есть два нескольких поля выбора, подобных этому

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

Что я пытаюсь сделать, так это то, что при нажатии кнопки «Выбрать» будет выбрана любая опция в «#bar», которая имеет то же значение с опцией в «#foo». В этом случае следует выбрать Opt 1 и Opt 2 в разделе «#bar». Я понятия не имею, почему мой javascript не будет работать. Я знаю, что это должно быть что-то очень простое. Я просто не вижу этого. :( Итак, моя функция Javascript выглядит следующим образом:

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);
 }