2016-11-19 136 views
1

我試圖從不同選擇標記中使用jQuery獲取相同名稱的值。jQuery:從具有相同名稱的不同選擇標記中獲取值

以下是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)和第二個我選擇第三個選項(索引3)。

此代碼是爲了獲取用戶對2或3種不同產品的輸入並將其存儲到cookie中以供進一步使用,但首先我需要將它作爲數組存儲,然後我可以將其存儲爲cookie中的json數組。

我試圖通過元素的名稱訪問,但它只響應使用id的訪問。

我想了幾個小時,想不出辦法。你的幫助將會很棒!

+0

夫婦的事情。首先,'wineId'是each()中的一個變量。這意味着它將在每次迭代中被創建和銷燬。如果你想讓它堅持下去,把它移到每一個之外。其次,更多的側面說明,你的選擇元素都有相同的ID。 Id不能在單個頁面上重複。他們是獨特的ID。第三,只需使用'this.value'。你不必做$(this)。val()如果你所有後面的是選擇的值。 – Taplar

+1

首先,使用不同的名稱和ID,並通過循環遍歷不同的選擇來創建一個數組。 – junkfoodjunkie

回答

3

您需要聲明外循環數組中的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(); 
+0

嘿,打我到帖子。 – Taplar

+0

這是我的愚蠢,我沒有想到這一點。 它現在正在完善 – Kuru

+0

有時它只是學習曲線的一部分 – charlietfl

0

有IDS不同,使用$('#id_name')在JavaScript調用或具有類名相同,並使用$('.class_name')

+0

Op正在使用相同的類名稱 – charlietfl

1

的主要問題是,你聲明內爲每個陣列,因此被覆蓋掉了。在循環外聲明它。

此外,無關你的問題:

  • 你選擇的元素具有相同的名稱和編號。他們可以並且應該共享一個類名稱,但不能使用元素名稱和ID。
  • 您可以使用'this.value'而不是'$(this).val()'。儘可能避免不必要的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]); 
}); 
相關問題