Chọn nhiều giá trị trong một hộp nhiều lựa chọn với Jquery

Question

Vì vậy, tôi có hai nhiều chọn hộp như thế này

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

Những gì tôi đang cố gắng làm là khi 'Chọn' được nhấp, bất kỳ tùy chọn trong "# thanh "có cùng giá trị với tùy chọn trong" #foo "sẽ được chọn. Trong trường hợp này, Opt 1 và Opt 2 trong "#bar" nên được chọn. Tôi không biết tại sao javascript của tôi không hoạt động. Tôi biết nó phải là một cái gì đó rất đơn giản. Tôi chỉ không thể nhìn thấy nó. :( Vì vậy, chức năng Javascript của tôi là như sau:

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

CẬP NHẬT sau khi nhìn thấy ví dụ KON của

DEMO

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

---

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

---

dụ Cũ hơn sử dụng mỗi

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

Kiểm tra này ra 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)})) 
    } 
) 
}); 



​