Select multiple values in a multiple select box with Jquery

javascript, jquery, multiple-select, selectedvalue

Solution

UPDATE after seeing KON's example

DEMO

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

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

Older example using each

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

Problem

So I have two multiple select boxes like this ``` <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> ``` What I'm trying to do is that when 'Select' is clicked, any option in "#bar" that has the same value with an option in "#foo" would be selected. In this case Opt 1 and Opt 2 in "#bar" should be selected. I've no idea why my javascript won't work. I know it must be something very simple. I just can't see it. :( So my Javascript function is as followed: ``` 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); } ```

Original source