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> 

및 다음 기능이 작동합니다 :

하지만 분명히 하나의 helperBox에만 적용됩니다. 각 섹션에서 많은 사람들이 작동하도록 만드는 방법. 그래서 combos 배열이 다른 섹션에서 다릅니 까?

Answer 1

당신처럼 그것을 위해 범위를 사용할 수 있습니다 (thisloadCombos 내부 여기 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>