填充選擇具有OPTGROUP從兩個不同的JSON對象的JQuery

Question

我有兩個JSON對象

var type = [{"Id":1,"Name":"This is a name"}]; 
var subType = [{"Id":2,"ParentId":1,"Name":"This is a name"},]; 

subType.ParentId引用type.Id

我希望能夠以填充選擇具有

的jQuery

<SELECT> 
<OPTGROUP LABEL="type.Name" id="type.Id">   
<OPTION LABEL="subType.Name" value="subType.Id">subType.Name</OPTION>     
</OPTGROUP> 
</SELECT> 

Answer 1

Adding optgroups to select using javascript dynamically

您能夠criate dinamamicaly合作MBO。訪問JSON的值是在這個問題。

How to access Json Object which has space in its name?

有在帖子某些情況下，解決你的問題。

Answer 2

以下代碼僅使用「select」作爲jquery選擇器，因此它會影響頁面上的所有選擇框。 你可能想改變這一點。

下面的代碼也沒有處理選擇的選項之一，這可能是你應該注意的。

var type = [{"Id":1,"Name":"This is a name"}]; 
var subType = [{"Id":2,"ParentId":1,"Name":"This is a name"}]; 

var output = []; 
$.each(type, function(){ 
    //for each type add an optgroup 
    output.push('<optgroup label="'+this.Name+'">'); 
    var curId = this.Id; 

    //linear search subTypes array for matching ParentId 
    $.each(subType, function(k,v){ 
     if(this.ParentId = curId){ 

     output.push('<option label="'+this.Name +'" value="'+ this.Id +'">'+ this.Name +'</option>'); 

     //DELETE the element from subType array so the next search takes less time 
     subType.splice(k,1); 
    } 
    }); 
    output.push('</optgroup>'); 
}); 

//change the 'select' here to the id of your selectbox 
$('select').html(output.join(''));