仅更改所选选项的文本

Question

我遇到问题。我有多个选项

<select name="p_hour"> 
<option value="00">12 am</option> 
<option value="01">1 am</option> 
<option value="02">2 am</option> 
<option value="03">3 am</option> 
<option value="04">4 am</option> 
<option value="05">5 am</option> 
<option value="06">6 am</option> 
<option value="07">7 am</option> 
<option value="08">8 am</option> 
<option value="09">9 am</option> 
<option value="10">10 am</option> 
</select> 

我想实现的是，当有人做了一个选择的选项的文字应该只无AM/PM更改为数字选择框。该代码是

jQuery("select[name='p_hour']").on('change', function() { 
    $selectedval = jQuery("select[name='p_hour'] option:selected").text(); 
    $selectedval = $selectedval.slice(0,-2); 
    jQuery("select[name='p_hour'] option:selected").text($selectedval); 
    $selectedval = ''; 
}); 

但问题是该选项的文本保持数只有在另外的选择时，我想改变文本仅只有选定的选项。谁能帮我？

Answer 1

可能不是最优雅但试试

jQuery(function ($) { 
    var selectedval, $select = $("select[name='p_hour']"), 
     $prev; 
    $select.on('change', function() { 
     var $cur = $select.find("option:selected") 
     if ($prev) { 
      if ($prev.is($cur)) { 
       return; 
      } 
      $prev.text(selectedval); 
     } 
     selectedval = $cur.text(); 
     $cur.text(selectedval.slice(0, -2)); 
     $prev = $cur 
    }).change() 
}) 

演示：Fiddle

Answer 2

这是因为你缺少);关闭您的.on()处理程序，并确保你已经把你的代码DOM准备好处理程序中：

jQuery(function() { 
    jQuery("select[name='p_hour']").on('change', function() { 
     $selectedval = jQuery("select[name='p_hour'] option:selected").text(); 
     $selectedval = $selectedval.slice(0, -2); 
     alert($selectedval); 
     jQuery("select[name='p_hour'] option:selected").text($selectedval); 
     $selectedval = ''; 
    }); // <-- Here 
}); 

Fiddle Demo