如何在类中使用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>