在jQuery中反转这个

时间:2013-09-17 09:27:23

标签: jquery html

我有一个代码段,可以在更改时替换选择菜单文本。我正在寻找一种简单的方法,在再次点击选择时将其更改回来。

的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>

2 个答案:

答案 0 :(得分:0)

这个怎么样?

     $('.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)");
        });
    });

答案 1 :(得分:0)

使用原始属性:

<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();
});