SELECT 문에 OPTGROUP을 어떻게 추가 할 수 있습니까? 내가 사용 jQuery를 통해 드롭 다운 옵션을 짓고 있어요

Question

다음 없습니다 :

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

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

드롭 다운을 구축, 아무 문제 - 그때 optgroup 옵션을 추가하려고 해요 - 나는 포장 다음 코드에 추가하려고했습니다 옵션 주위에는 optgroup이지만 기쁨은 없습니다.

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>'); 
    } 
}); 

위의 HTML 출력은 다음과 같습니다

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

출력은해야한다 :

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

어떤 조언을 환영했다.

Answer 1

html 문자열과 마찬가지로 jQuery를 고려하면 append()은 여기에서 직면 한 문제입니다.

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>

또 다른 해결책은 뾰족한 제안처럼 wrapAll()을 사용하는 것입니다.

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>