I learned from the famous example how to do this using the ID and I like this solution most of all:
var options = $('#selectBox option');
var values = $.map(options ,function(option) {
return option.value;
});
I have many repeating blocks in a separate containers like this:
<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>
and the following function works:
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;
}
but only for one helperBox, obviously. How to make it work for many in each section. so that combos
arrays are different in different sections ?
You can use the scope for it like (based on assumption that this
inside loadCombos
here refers to a button inside 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;
}
IDs are meant to be unique in CSS. You either change the ID to classes or have separate IDs and have a common classname.
<div id="helperbox1" class="helperbox"></div>
<div id="helperbox2" class="helperbox"></div>
or use two classes like
<div class="helperbox b1"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.