2012-04-07 11 views
8

Więc mam dwie wielu wybierz pola jak towybrać wiele wartości w wielokrotnego zaznaczania z 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> 

Co staram się robić to, że gdy „Wybierz” kliknięciu dowolnej opcji w „# bar ", który ma tę samą wartość z opcją w" #foo "zostanie wybrany. W takim przypadku należy wybrać Opt 1 i Opt 2 w "#bar". Nie mam pojęcia, dlaczego mój javascript nie będzie działać. Wiem, że to musi być coś bardzo prostego. Po prostu tego nie widzę. :( Więc moja funkcja JavaScript jest jak następuje:

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

Odpowiedz

5

UPDATE po obejrzeniu przykład Kon za

DEMO

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

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

Starsze przykład stosując każdy

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

1 Dofinansowanie, ponieważ? – mplungjan

5

to sprawdzić 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)})) 
    } 
) 
}); 



​ 
+0

Kiedy wysłaniem odpowiedzi upewnij się, że zawierają kod. Fiddle's nie trwa wiecznie, a celem SO jest stworzenie trwałego repozytorium dobrych pytań z dobrymi odpowiedziami. Linki umierają. Chcemy, aby inni skorzystali z twojej wiedzy. – mrtsherman

+0

Przeprosiny, nie wiedziałem, że nie trwają wiecznie. – kon

+0

Bez problemu. Zmodyfikowałem twoje pytanie, aby dołączyć kod. +1 dla ładnie zakodowanej odpowiedzi. – mrtsherman

Powiązane problemy