Comment obtenir des valeurs d'optgroup multisélect basées sur chaque étiquette sur submit?

Question

J'ai une option de sélection avec plusieurs optgroups. Je veux sélectionner plusieurs valeurs de chaque groupe & obtenir des valeurs en fonction de l'étiquette (de optgroup) lors de la soumission.

code HTML est

<table> 
<tr> 
    <td>Select</td> 
    <td> 
    <select multiple="multiple" id="multiGrpSel" "> 
    <optgroup label="Indutry Types" id="types"> 
     <option value="1">Private</option> 
     <option value="2">Public</option> 
     <option value="3">Govt</option> 
    </optgroup> 
    <optgroup label="Unit Category" id="unit"> 
     <option value="1">Micro</option> 
     <option value="2">Small</option> 
     <option value="3">Medium</option> 
    </optgroup> 
    </select> 
    </td> 
</tr> 
<tr><th align="center"> <input type="button" id="submit" class="button" value="Submit"> </th></tr> 
</table> 

Et soumettre

$("#submit").die('click').live('click',function() { 

    $('#multiGrpSel').find("option:selected").each(function(){ 
     //optgroup label 
     console.debug('label='+$(this).parent().attr("label")); 
     //optgroup id 
     console.debug('id='+$(this).parent().attr("id")); 

     // values based on each group ?? 
     id = $(this).parent().attr("id"); 
     console.debug('value='+$('#'+id).val()); 
    }); 


}); 

Si deux options de 1er & 2e optgroups sont sélectionnés, je reçois l'étiquette & id, mais la valeur est vide.

Sortie:

label=Unit Category 
id=unit 
value= 
label=Unit Category 
id=unit 
value= 
label=Industry Types 
id=types 
value= 
label=Industry Types 
id=types 
value= 

Answer 1

En fait, vous avez déjà accès aux valeurs de ces options sélectionnées, mais vous en train d'essayer d'obtenir une valeur à partir du optgroup et non du option puisque vous avez utilisé le optgroup's #id pour déterminer sa valeur, c'est pourquoi vous obtenez toujours un résultat vide pour la valeur.

Voir un code de travail ci-dessous:

$("#submit").click(function(){ 
 
    $('#multiGrpSel').find("option:selected").each(function(){ 
 
     //optgroup label 
 
     var label = $(this).parent().attr("label"); 
 
     //optgroup id 
 
     console.log('id='+$(this).parent().attr("id")); 
 

 
     // values based on each group ?? 
 
     id = $(this).parent().attr("id"); 
 
     
 
     
 
     // gets the value 
 
     console.log("label: "+label+" value: "+$(this).val()) 
 
     
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="multiGrpSel"> 
 
    <optgroup label="Indutry Types" id="types"> 
 
     <option value="1">Private</option> 
 
     <option value="2">Public</option> 
 
     <option value="3">Govt</option> 
 
    </optgroup> 
 
    <optgroup label="Unit Category" id="unit"> 
 
     <option value="1">Micro</option> 
 
     <option value="2">Small</option> 
 
     <option value="3">Medium</option> 
 
    </optgroup> 
 
    </select> 
 

 
<input type="button" id="submit" value="submit"/>

Answer 2

La valeur (valeur de texte) est que le contenu du texte de cette.

console.debug('value=' + $(this).text()); 

Si vous voulez que la valeur réelle (numéros correspondants), utilisez ceci:

console.debug('value=' + $(this).val());