從JQUERY選項中選擇元素OptGroup

Question

我基本上從服務器獲得標準選擇。如果選項值是'GROUP'，我需要將該選項更改爲選項組。如果選項值爲'GROUPEND'，則需要將其更改爲結束選項組。選擇呈現正確，功能被解僱，只是沒有正確分組...

我創建了一個功能，因此它不工作。任何指導將不勝感激。這裏是代碼。我留下了評論，以便您可以看到我所嘗試的內容。

$('#residualModelSelector').multiselect({ 
    header: true, 
    selectedList: 5, 
    click: function (e) { 
     //allow only 5 to be selected 
     if ($(this).multiselect("widget").find("input:checked").length > 5) { 
      return false; 
     } 
    } 
}).multiselectfilter() 
    .live(updateModelGroups($('#residualModelSelector'))); 

function updateModelGroups(residualModelSelector){ 
    $('#residualModelSelector').find('option').each(function() { 
     var strOptGroup = $(this).val().split('-'); 
     var strOptGroupChk = strOptGroup[0]; 
     var strOptGroupLabel = strOptGroup[1]; 
     if (strOptGroupChk == 'GROUP') { 
      var replaceThisOption = document.createElement('optgroup'); 
      replaceThisOption.label = strOptGroupLabel; 
      $(this).replaceWith(replaceThisOption); 
       //.html('<optgroup label=' + strOptGroupLabel + '>'); 
      //.replaceWith('<optgroup label=' + strOptGroupLabel + '>'); 
     } else if (strOptGroupChk == 'GROUPEND') { 
      var replaceThisOptionEnd = $('</optgroup>'); 
      $(this).replaceWith(replaceThisOptionEnd); 
      //$(this).replaceAll('</optgroup>'); 
       //.html('</optgroup>'); 
       //.replaceWith('</optgroup>'); 
     } 
    }); 
    $('#residualModelSelector').multiselect('refresh'); 
} 

Answer 1

我設置一個的jsfiddle這個測試http://jsfiddle.net/murCv/

1）我假設你的選擇框看起來像

<select id="residualModelSelector"> 
    <option value="some-node1">Out side opt groups 1</option> 
    <option value="GROUP-first">FirstGroup</option> 
    <option value="first-node1">Inside First group 1</option> 
    <option value="first-node2">Inside First group 2</option> 
    <option value="GROUPEND-first">End FirstGroup</option> 
    <option value="some-node2">Between Groups</option> 
    <option value="GROUP-second">SecondGroup</option> 
    <option value="second-node1">Inside Second group 1</option> 
    <option value="second-node2">Inside Second group 2</option> 
    <option value="GROUPEND-second">End SecondGroup</option> 
    <option value="some-node2">Out side opt groups 2</option> 
</select> 

這裏是工作的js

var group = null; 
$('#residualModelSelector').find('option').each(function() { 
    var strOptGroup = $(this).val().split('-'); 
    var strOptGroupChk = strOptGroup[0]; 
    var strOptGroupLabel = strOptGroup[1]; 
    if (strOptGroupChk == 'GROUP') { 
     group = $("<optgroup label='"+ strOptGroupLabel + "' ></optgroup>").insertBefore($(this)); 
    } else if (strOptGroupChk == 'GROUPEND') { 
     group = null; 
    } 

    if (strOptGroupChk == 'GROUP' || strOptGroupChk == 'GROUPEND') { 
     $(this).remove(); 
     return; 
    } 

    if (group != null) 
     $(this).appendTo(group); 

}); 

的產生html

<select id="residualModelSelector"> 
    <option value="some-node1">Out side opt groups 1</option> 
    <optgroup label="first"> 
     <option value="first-node1">Inside First group 1</option> 
     <option value="first-node2">Inside First group 2</option> 
    </optgroup> 
    <option value="some-node2">Between Groups</option> 
    <optgroup label="second"> 
     <option value="second-node1">Inside Second group 1</option> 
     <option value="second-node2">Inside Second group 2</option> 
    </optgroup> 
    <option value="some-node2">Out side opt groups 2</option> 
</select>