帶有多個值的jQuery Multi-Select

Question

我有一個表單，您可以在其中選擇一個位置，該位置具有郵政編碼，並在data-foo值中捕獲。 我需要的是一個基於多個位置選擇的數組。

一個例子是，如果兩個都被選中，我將有65807 => 71118

形成：

 <form enctype='multipart/form-data' role='form' action='' method='post'> <div class="row"> <div class="col-md-3"> <div class='form-group'> <label for='select'>Destination(s)&nbsp;</label> <select name='destination[]' style='height: 200px;' multiple class='form-control' multiple='multiple' id='destination' style='lane'>"; <option value='Springfield' data-foo='65807'>Springfield, MO</option> <option value='Shreveport' data-foo='71118'>Shreveport, LA</option> </select> </div> </div> </div> </form> 

到目前為止，我對JS有什么：

 $(function(){ $('#origin').change(function(){ var selected = $(this).find('option:selected'); $('#origin_zip').html(selected.data('foo')); }).change(); }); $('#destination').change(function() { $('#destination_zip').text(''); var selected = $('#destination').val(); for (var i = 0; i < selected.data; i++) { $('#destination_zip').data($('#destination_zip').data('data-foo') + selected[i]); } }); 

編輯：

這是使用文本構建數組的代碼，而不是我需要的data-foo。

 $('#destination').change(function() { $('#destination_zip').text(''); var selected = $('#destination').val(); for (var i = 0; i < selected.length; i++) { $('#destination_zip').text($('#destination_zip').text() + selected[i]); } }); 

Answer 1

可以使用以下內容：

$('#destination').change(function() { // Whenever the select is changed
    var arr = []; // Create an array
    $('#destination option:selected').each(function(){ // For each selected location
        arr.push($(this).data("foo")); // Push its ZIP to the array
    });
    console.log(arr); // will include the ZIP code(s) of selected location(s).
});

jsFiddle示例在這里

Answer 2

像這樣嗎 （有點丑，我知道）

$('#destination').change(function() {
  var selected = [];
  for(i = 0; i < $('#destination').children().length; i++){
    selected[i] = $($('#destination').children()[i]).data('foo');
  }
  console.log(selected);
});

編輯：沒關系，看看@dsg的答案