IDのクラスではなく、jQueryを使ってselectのすべてのオプションを取得するには？

Question

私はIDを使用してこれを行う方法famous exampleから学んだと私は、このソリューションが好きなすべてのほとんど：

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> 

をし、次の関数が機能します：

ただし、明らかに1つのhelperBoxのみです。どのように各セクションで多くのために働くようにする。そのため、combosアレイは異なるセクションで異なっていますか？

Answer 1

あなたは（ここではloadCombos内部thisがsection divの内側のボタンを参照していることを前提に基づいて）のようにそれのためのスコープを使用することができます。

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>