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>

When i choose the 24 hours format the option values should display.

jquery:

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

How should the jquery look??

Answer 1

If you have both a label attribute and text content in an <option> element the <label> will take priority.

You can copy the values into the label like this:

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

similarly you can copy the text content back into the label like this:

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

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

Note that (in Chrome, at least) neither will cause the control to change its current displayed value. They only appear when you click on the <select> element again. I’m still working on that…

EDIT here’s my final answer:

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