2015-02-03 1 views
2

에 OPTGROUP 추가내가 기존의 선택을 기존 선택하여 JQuery와

var $selectStatus = jQuery("<select id='Status' name='status'></select>"); 
var enabledHtml = "<option value='ENABLED'>"ON"</option>"; 
var disabledHtml = "<option value='DISABLED'>"OFF"</option>"; 
var $statusEnabled = jQuery(enabledHtml); 
var $statusDisabled = jQuery(disabledHtml); 
//some code to add "selected" properties 
... 
//finally add to select 
$selectStatus.append($statusEnabled, $statusDisabled); 

이 옵션으로 ON/OFF와 선택을 생산하고 있습니다. 이제 배열에 저장된 일부 값과 함께 optgroup을 추가하고 싶습니다.

<select> 
    <option value="ENABLED">ON</option> 
    <option value="DISABLED">OFF</option> 
    <optgroup label="Info"> 
    <option value="some value">some value</option> 
    <option value="some value">some value</option> 
... 
    </optgroup> 
</select> 

그것은 어떤 옵션 값 또는 옵션 값의 수와 빈 OPTGROUP 수 :

은 그래서 당신이 얻을해야 할 것은 같은 선택 뭔가입니다.

내가이 시도 : 정보의

var status_optgroup_open = "<optgroup label='Info'>" 
    for(i=0;i<info.length;i++) 
    { 
     $foobar = jQuery('#Status').append(jQuery('<option/>').val(info[i].info_name).html(info[i].info_name)); 

    } 
    var status_optgroup_close = "</optgroup>" 

var $statusOpen = jQuery(status_optgroup_open); 
var $statusClose = jQuery(status_optgroup_close); 
$selectStatus.append($statusEnabled, $statusDisabled, $statusOpen, $foobar, $statusClose); 

출력을 [I] .info_name 내가 기대하지만 난 그냥이 상황에서 그들을 추가 할 방법을 모르겠어요. 지금 이것은 빈 optgroup을 산출합니다.

답변

2

.append() 기능은 단지 그것으로 전달 된 모든 문자열을 연결하지 않습니다.

그래서이 : $("body").append("<p>","hi","</p>") 그것은, 배열의 각 요소를 가지고 필요한 경우 DOM에 추가하고, 부모에게 이러한 요소를 추가합니다, 대신 <p>hi</p>

양보하지 않을 것이다. 그래서 실제 출력은 다음과 같이 보일 것이다 :

<p></p> 
"hi" 
<p></p> 

대신, 당신이 원하는 무엇의 optgroup을 만들고 해당하는 개별 옵션을 모두 추가합니다. 그리고이 같은 선택 요소에 그 전체 오브젝트 (어린이 모두)를 추가 :

var info = [ 
 
    {info_name: 'Some Value 1'}, 
 
    {info_name: 'Some Value 2'} 
 
]; 
 

 
// create select 
 
var $selectStatus = $("<select id='Status' name='status'>"); 
 

 
// create options 
 
var enabled = "<option value='ENABLED'>ON</option>"; 
 
var disabled = "<option value='DISABLED'>OFF</option>"; 
 

 
// create opt group 
 
var $optgroup = $("<optgroup label='Info'>"); 
 
for (i=0; i<info.length; i++) { 
 
    var op = "<option value='" + info[i].info_name + "'>" + info[i].info_name + "</option>"; 
 
    $optgroup.append(op); 
 
} 
 

 
// create select 
 
$selectStatus.append(enabled, disabled, $optgroup); 
 

 
// add select to page 
 
$("body").append($selectStatus);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

을 : jQuery를 자동으로 jQuery constructor$(<html>)에서 제공하는 문자열에서 DOM 요소를 생성합니다. 의미는 $() 함수에 전달되는 요소 태그를 닫을 필요가 없다는 의미입니다.

1

당신은 단순히 문자열을 사용하고 그 추가 수 :

var optgroup = "<optgroup label='Info'>"; 

for (var i = 0; i < info.length; i++) { 
    name = info[i].info_name; 
    optgroup += "<option value='" + name + "'>" + name + "</option>" 
} 

optgroup += "</optgroup>" 

$('select').append(optgroup); 
관련 문제