jquery - Reverse this in jQuery

Question

I have a snippet that replaces a select menus text when changed. I'm looking for a simple way of change it back when the select is clicked again.

jQuery

$('.youth').change(function(){    
    $(".youth option").each(function() {
    var text = $(this).text();
    text = text.replace("(12-15yr)", "  ");
    $(this).text(text);
    });
});

HTML

<select class="youth element">
  <option selected>Youth</option>
  <option value="1">0</option>
  <option value="1">1 (12-15yr)</option>
  <option value="2">2 (12-15yr)</option>
  <option value="3">3 (12-15yr)</option>
  <option value="4">4 (12-15yr)</option>
  <option value="5">5 (12-15yr)</option>
  <option value="6">6 (12-15yr)</option>
</select>

Answer 1

这个怎么样？

     $('.youth').blur(function () {
        $(".youth option").each(function () {
            var text = $(this).text();
            text = text.replace("(12-15yr)", "  ");
            $(this).text(text);
        });
    });
    $('.youth').focus(function () {
        $(".youth option").each(function () {
            $(this).text($(this).text().match(/\(12-15yr\)$/) ? $(this).text() : $(this).text() + "(12-15yr)");
        });
    });

Answer 2

具有原点属性：

<option value="3" origin="3 (12-15yr)">3 (12-15yr)</option>

你可以这样做 ：

小提琴：http: //jsfiddle.net/MjCxZ/

$('.youth').on('focus',function(){ 
    $(".youth option").each(function() {     
          $(this).text($(this).attr('origin'));
    });
}); 


$('.youth').on('change',function(){ 
    $(".youth option").each(function() {         
         var text = $(this).text();
                    text = text.replace("(12-15yr)", "  ");
                        $(this).text(text);
    });
    $(this).blur();
});