Wie kann ich OPTGROUP zur Select-Anweisung hinzufügen?

Question

Ich bin eine Drop-Down-Option über jQuery mit dem Gebäude folgenden:

var myOptions = { 
    var1 : 'Road', 
    var2 : 'Rail' 
}; 

var mySelect = $('#q54'); 
    $.each(myOptions, function(val, text) { 
     mySelect.append(
      $('<option></option>').val(text).html(text) 
    ); 
}); 

die Drop-Down-Gebäude, kein Problem - ich bin dann optgroup Optionen anhänge versucht - ich habe in dem folgenden Code versucht, das Hinzufügen zu wickeln Die optgroup um die Option aber keine Freude.

var i = 1; // Addition 
$.each(myOptions, function(val, text) { 
    if(i == 1){ 
     $("#q54").append('<optgroup class="optgroups" label="Team">'); 
    } 
    mySelect.append(
     $('<option></option>').val(text).html(text) 
    ); 
    if(i == 2){ 
     $("#q54").append('</optgroup>'); 
    } 
}); 

Die HTML-Ausgabe des oben ist:

<optgroup class="optgroups" label="Team"></optgroup> 
<option value="Road">Road</option> 

Die Ausgabe sollte:

<optgroup class="optgroups" label="Team"> 
    <option value="Road">Road</option> 
</optgroup> 

Jede Beratung begrüßt.

Answer 1

Betrachtet man jQuery append() wie die HTML-Zeichenfolge ist das Problem, das Sie hier begegnen.

var myOptions = { 
 
    var1 : 'Road', 
 
    var2 : 'Rail' 
 
};  
 
var i = 1; // Addition 
 
var $group = $('<optgroup class="optgroups" label="Team">'); 
 
$("#q54").append($group); 
 
$.each(myOptions, function(val, text) { 
 
    $group.append($('<option></option>').val(text).html(text)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="q54"></select>

Eine andere Lösung ist wrapAll() zu verwenden wie Zipfel vorgeschlagen.

var myOptions = { 
 
    var1 : 'Road', 
 
    var2 : 'Rail' 
 
};  
 
var i = 1; // Addition 
 
$.each(myOptions, function(val, text) { 
 
    $("#q54").append($('<option></option>').val(text).html(text)); 
 
}); 
 
$("#q54").children().wrapAll('<optgroup class="optgroups" label="Team">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="q54"></select>