mehrere Werte in einer Mehrfachauswahlfeld mit JQuery

Question

So habe ich zwei mehrere Auswahlboxen wie diese

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

Was ich versuche, das zu tun ist, wenn ‚Select‘ geklickt wird, eine Option in „# Balken ", der den gleichen Wert mit einer Option in" #foo "hat, würde ausgewählt werden. In diesem Fall sollten Opt 1 und Opt 2 in "#bar" ausgewählt werden. Ich habe keine Ahnung, warum mein Javascript nicht funktioniert. Ich weiß, dass es etwas sehr einfaches sein muss. Ich kann es einfach nicht sehen. :( So ist meine Javascript-Funktion wie folgt:

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 nach

KON dem Beispiel zu sehen

DEMO

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

---

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

---

Ältere Beispiel jeder

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



​