如何將select的標籤替換爲其值？

Question

HTML：

<input type="radio" name="timeformat" id="timeformat-a" value="am/pm" checked="checked" /> <b>am/pm</b> 
<input type="radio" name="timeformat" id="timeformat-b" value="24 hours" /> <b>24 hours</b> 
     <select id="default-start-time" class="select check-list"> 
      <option value="" label="--Select--">--Select--</option> 
      <option value="00:00" label="12:00 AM">12:00 AM</option> 
      <option value="00:30" label="12:30 AM">12:30 AM</option> 
      <option value="01:00" label="01:00 AM">01:00 AM</option> 
      <option value="01:30" label="01:30 AM">01:30 AM</option> 
      <option value="02:00" label="02:00 AM" selected>02:00 AM</option> 
      <option value="02:30" label="02:30 AM">02:30 AM</option> 
     </select> 

當我選擇24小時制的選項值應顯示。

的jQuery：

$("input[name='timeformat']").click(function() { 
     if($(this).val()=='24 hours') 
     { 
     // code which replaces label with the option value  
     } 
    }); 

應該如何jQuery的樣子？

Answer 1

如果你同時擁有label屬性和文本內容在<option>元素<label>將優先。

您可以將值複製到標籤是這樣的：

$('#default-start-time option').attr('label', function() { 
    return this.value; 
}); 

同樣可以複製的文本內容返回到標籤是這樣的：

$('#default-start-time option').attr('label', function() { 
    return this.innerHTML; 
}); 

見http://jsfiddle.net/alnitak/cLuZa/

注（至少在Chrome中）既不會導致控件更改當前的顯示值。它們僅在您再次單擊<select>元素時出現。我還在上......這裏

編輯是我最後的答案：

$("input[name='timeformat']").click(function() { 
    var ampm = $(this).val() !== '24 hours'; // get mode 
    var sel = $('#default-start-time')[0]; // get the <select> element 

    $('option', sel).attr('label', function() { 
     return ampm ? this.innerHTML : this.value; 
    }); 

    sel.selectedIndex += 0; // force refresh 
});​ 

Answer 2

根據所選值更改標籤的狀態會永久更改它。我們需要存儲對每個我們想要切換的值的引用，這些值很容易處理，因此我們使用data屬性。

我不知道如果你有機會到HTML，所以這裏的jQuery的做我們所需要的。

$('#default-start-time option').each(function(index,obj){ 
    $(obj).data('ampm', $(obj).prop('label')); 
    $(obj).data('24hr', $(obj).val()); 
}); 

現在，在點擊功能中，我們可以基於所選的值在數據屬性之間切換。

$("input[name='timeformat']").click(function() { 
    if($(this).val()=='24 hours') 
    { 
     $('#default-start-time option').each(function(index,obj){ 
      $(obj).prop('label', $(obj).data('24hr')); 
     });    
    } 
    else 
    { 
     $('#default-start-time option').each(function(index,obj){ 
     $(obj).prop('label', $(obj).data('ampm')); 
     }); 
    } 
}); 

Here is the fully working jsFiddle.