如何在類中使用jQuery獲取選擇的所有選項，而不是ID？

Question

我從famous example學會了如何使用ID來做到這一點，我喜歡這個解決方案最重要的是：

var options = $('#selectBox option'); 

var values = $.map(options ,function(option) { 
    return option.value; 
}); 

我有一個單獨的容器有許多重複的塊這樣的：

<div class="section"> 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 


    <select class='helperBox' id='helperBox' > 
     <option val='AB'>AB</option> 
     <option val='BCD'>BCD</option> 
     <option val='C'>C</option> 
     <option val='AD'>AD</option> 

     </select> 
    <label>Result <input type="text" value="10" class="result" ></label> 

</div> 

<div class="section"> 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 

    <select class='helperBox'> 
     <option val='B'>B</option> 
     <option val='BD'>BD</option> 
     <option val='AC'>AC</option> 
     <option val='C'>C</option> 
     </select> 
    <label>Result <input type="text" value="20" class="result" ></label> 

</div> 

和以下功能的工作原理如下：

function loadCombos($section) { 
    var $section = $(this).closest(".section"); 
    //var $combos = $section.find('.helperBox'); 
    var options = $('#helperBox option'); 

    var combos = $.map(options,function(option) { 
    return option.value; 
    }); 

    console.log(combos); 

    return combos; 

    } 

但顯然只有一個helperBox。如何使它在每個部分中都適用。所以combos數組在不同部分有所不同？

Answer 1

您可以使用範圍的像（基於假設this內loadCombos這裏指的是按鈕內section格）：

function loadCombos() { 
    var $section = $(this).closest(".section"); 
    var $combos = $section.find('.helperBox'); //<-- only select in this section 
    var options = $combos.find('option');  //<-- only options of current select 
    var combos = $.map(options, function(option) { 
    return option.value; 
    }); 

    console.log(combos); 
    return combos; 
} 

Answer 2

ID的意思是在CSS中是獨一無二的。 您可以將ID更改爲類或具有單獨的ID並具有公共類名。

<div id="helperbox1" class="helperbox"></div> 
<div id="helperbox2" class="helperbox"></div> 

或使用兩個類，如

<div class="helperbox b1"></div>