具有多個值的JQuery多選擇

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

一個例子是，如果既會選擇我有65807 => 71118

形式：

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

編輯：

這是用於構建數組與文本，但不是我需要的數據-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]); 
 
    } 
 
});

來源

2015-02-06 Jeff Beagley

所以，你希望用戶能夠選擇多個地點？選擇選項菜單隻允許選擇一個選項。我想你想要複選框或單選按鈕。你給的例子是一個在javascript中不可用的關鍵值。你可以通過這種方式構建一個json對象。 – floor 2015-02-06 22:48:24

我可以讓它基於.text使用.val（）已經建立一個數組..我只需要將.text更改爲.data的形式 – 2015-02-06 22:50:45

不知道你想在這裏做什麼...有什麼區別.text和.data之間？ – TRGWII 2015-02-06 22:52:38

下可以使用：

$('#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 example here

來源

2015-02-06 23:00:56 lifetimes

作品完美，謝謝dsg！ – 2015-02-08 08:06:02

像這樣的事情？（有點醜，我知道）

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

編輯：沒關係，看看@ DSG的回答

來源

2015-02-06 23:01:00 TRGWII

具有多個值的JQuery多選擇

回答

相關問題