2017-10-20 19 views
0

j'ai appris de la famous example comment faire en utilisant l'identifiant et j'aime cette solution avant tout:Comment obtenir toutes les options d'un select en utilisant jQuery sur sa classe, pas ID?

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

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

J'ai beaucoup répéter des blocs dans un des récipients séparés comme celui-ci:

<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> 

et la fonction suivante fonctionne:

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; 

    } 

mais seulement pour un helperBox, évidemment. Comment le faire fonctionner pour beaucoup dans chaque section. de sorte que combos tableaux sont différents dans différentes sections?

Répondre

1

Vous pouvez utiliser le champ pour comme (basé sur l'hypothèse que l'intérieur thisloadCombos ici fait référence à un bouton à l'intérieur 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; 
} 
+0

Merci, je cherchais quelque chose comme ça, mais 'var options = combos.find de $ ('option'),' ne le trouve pas, résultats []. –

0

ID sont destinés à être unique en CSS. Vous pouvez soit changer l'ID en classes, soit avoir des ID distincts et avoir un nom de classe commun.

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

ou utiliser deux classes comme

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