jQuery：同じ名前の別のselectタグから値を取得する

Question

jQueryを使用して同じ名前の別のselectタグから値を取得しようとしました。

次はHTML

<div class="row">  
    <div class="col-md-3"> 
    <h1><i class="fa fa-glass" aria-hidden="true"></i></h1> 
    <select class="form-control SelectWine" id="SelectWine" name="SelectWine[]"> 
     <option value="1">Red</option> <option value="2">Green</option> <option value="3">White</option>            </select> 
    </div> 
    <div class="col-md-3"> 
    <h1><i class="fa fa-glass" aria-hidden="true"></i></h1> 
    <select class="form-control SelectWine" id="SelectWine" name="SelectWine[]"> 
     <option value="1">Red</option> <option value="2">Green</option> <option value="3">White</option>            </select> 
    </div> 

</div> 

次は、私はjQueryのにアクセスしていますがどのようにです：

$('.SelectWine').each(function (index){ 
     var wineId=[]; 
     wineId.push($(this).val()); 
     console.log('Wid',wineId[0]); 
     console.log('Wid',wineId[1]); 
     console.log('Wid',wineId[2]); 
    }); 

Wid 1 
Wid undefined 
Wid undefined 
Wid 3 
Wid undefined 
Wid undefined 

を以下のように私は、コンソールログを取得しています私はよそれが値を無効にするたびに推測します。しかし、私は1つの配列に各選択タグからの値を格納する必要があります。

注：：最初の選択タグはデフォルト（インデックス1）で、2番目の選択タグは3番目のオプション（インデックス3）を選択しました。

このコードは、2つまたは3つの異なる製品のユーザー入力を取得し、後で使用するためにクッキーに格納しますが、最初に配列として格納する必要があり、次にクッキーにjson配列として格納できます。

私は要素の名前を使ってアクセスしようとしましたが、idを使ってアクセスするためだけに応答しています。

私は何時間も試していましたが、方法を理解できません。あなたの助けは素晴らしいでしょう！

Answer 1

を使用してJavaScriptで呼び出し、そうでなければ、各反復で新しい配列を作成していますスコープのためにeachコールバックの外部にアクセスすることはできません。あなたはこのような配列を生成する必要がある場合

var wineId=[]; 
$('.SelectWine').each(function (index){ 
     //now each iteration will push to same array 
     .... 

あなたはmap()

var windeId = $('.SelectWine').map(function(){ 
    return this.value; 
}).get(); 

Answer 2

は異なるIDを持つと$('#id_name')を使用してJavaScriptで呼び出したりしたクラス名を同じとあなたはループの外で配列を宣言する必要が$('.class_name')

Answer 3

を使用することができます主な問題は、あなたがそれぞれの内部に、あなたの配列を宣言しているということなので、上書きなっています。ループの外側に宣言します。あなたの問題とは関係のないまた

、：

• あなたの選択要素には同じ名前とIDを持っています。クラス名は共有できますが、要素名とIDは共有できません。
• '$（this）.val（）'ではなく 'this.value'を使用することができます。 jQueryの不要な使用を避けることは、パフォーマンスを向上させます。

https://jsfiddle.net/1ok6ymgf/

var wineId=[]; 
$('.SelectWine').each(function (index) {  
    wineId.push(this.value); 
    console.log('Wid',wineId[0]); 
    console.log('Wid',wineId[1]); 
    console.log('Wid',wineId[2]); 
});