जोड़ना optgroups गतिशील jQuery

Question

<select id="myElement" multiple="multiple"> 
    <option value="1">Category Type</option> 
    <option value="158">itemOne</option> 
    <option value="157">itemTwo</option> 
    <option value="7">My Type</option> 
    <option value="20">itemThree</option> 
    <option value="21">itemFour</option> 
    <option value="22">itemFive</option> 
    <option value="8">Category Yet Another</option> 
    <option value="31">itemCheese</option> 
    <option value="32">itemBrain</option> 
</select> 

का उपयोग कर मैं गतिशील बदलने की आवश्यकता इस ताकि "श्रेणी" विकल्प (कुछ भी है कि "आइटम" के साथ शुरू नहीं करता है) एक optgroup है, लपेटकर whaterver अगले श्रेणी विकल्प जब तक यह बाद आता है, तो ऊपर अंत की तरह लग रही होगी:

<select id="myElement" multiple="multiple"> 
    <optGroup label="Category Type"> 
    <option value="158">One</option> 
    <option value="157">Two</option> 
    </optGroup> 
    <optGroup label="My Type"> 
    <option value="20">Three</option> 
    <option value="21">Four</option> 
    <option value="22">Five</option> 
    </optGroup> 
    <optGroup label="Category Yet Another"> 
    <option value="31">Cheese</option> 
    <option value="32">Brain</option> 
    </optGroup> 
</select> 

मैं इस और परिवर्तन मूल्यों पर पुनरावृति jQuery का उपयोग कर वांछित प्रभाव हासिल करने के लिए कर सकते हैं?

Answer 1

यह काफी आसान jQuery का उपयोग कर रहा है:

http://jsfiddle.net/mGmXq/

$(document).ready(function() { 
    var $cont = $('select'); 
    $('option').each(function() { 
     if ($(this).text().indexOf('item') !== 0) { 
      $('<optGroup/>').attr('label', $(this).text()).appendTo($cont); 
      $(this).remove(); 
     } else { 
      $cont.find('optGroup').last().append($(this)); 
      $(this).text($(this).text().substr(4)); 
     } 
    }); 
});​ 

Answer 2

आप <option> तत्वों कि समूहों बन जाएगा मैच के लिए filter() उपयोग कर सकते हैं। फिर, आप उन पर पुन: प्रयास कर सकते हैं और nextUntil() को उसी विकल्प पर मिलान करने के लिए सेट कर सकते हैं जो बाद के विकल्पों से मेल खाता है (nextUntil() सेट के सदस्य से मुकाबला करने पर रोक देगा, यानी अगला विकल्प जो समूह बनना चाहिए)।

वहां से

, आप उनके <optgroup> तत्व बनाने के लिए है, तो <option> तत्व यह है कि सिर्फ एक समूह बन गया पर remove() फोन इन <option> तत्वों पर wrapAll() उपयोग कर सकते हैं। कुछ की तरह:

var $groups = $("#myElement option").filter(function() { 
    return $(this).text().indexOf("item") != 0; 
}); 
$groups.each(function() { 
    var $this = $(this); 
    $this.nextUntil($groups).wrapAll($("<optgroup>", { 
     label: $this.text() 
    })).end().remove(); 
}); 

आप this fiddle में परिणाम देख सकते हैं।

Answer 3

मेरे कार्यान्वयन:

$(function(){ 
    var target = $('#target'), 
     optGroup; 

    function strStartsWith(str, prefix) { 
     return str.indexOf(prefix) === 0; 
    } 

    $('#myElement').find('option').each(function(){ 
     var elm = $(this).clone(); 
     if(strStartsWith(elm.text(), 'item')) 
     { 
      elm.text(elm.text().substr(4)); 
      if(optGroup) optGroup.append(elm); 
     } 
     else 
     { 
      optGroup = $('<optgroup>').attr('label', elm.text()); 
      target.append(optGroup); 
     } 
    }); 
}); 

डेमो: http://jsfiddle.net/HUHRz/1/

Answer 4

$.each(data, function() { 

    if (prevGroupName.indexOf(this.Group.Name) == -1) { 
     $prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#ConfigurationId'); 
    } else { 
     $prevGroup = $("optgroup[label='" + this.Group.Name + "']"); 
    } 
    $("<option />").val(this.Value).text(this.Text).appendTo($prevGroup); 
    prevGroupName.push(this.Group.Name); 
});