javascript - 使用 Jquery 在多选框中选择多个值

Question

所以我有两个像这样的多选框

<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”中的选项具有相同值的任何选项。在这种情况下，应选择“#bar”中的 Opt 1 和 Opt 2。 我不知道为什么我的 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);
 }

Answer 1

看到 KON 的例子后更新

DEMO

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

---

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

---

使用每个的老例子

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