javascript - 根据另一个选项值设置一个下拉菜单的文本

Question

我有一个复选框可以将时间设置为 24 小时制或 12 小时制。如果用户选中或取消选中此项，我希望将当前时间设置为备用时间格式中的同一时间。因此，如果当前时间为 17:00，则应将其设置为下午 5:00。目前它只是将其设置回第一个选项值。这是JSFIDDLE .

<input type="checkbox" id="isCheckedFormat">24 Hour</p>

<select id="time1">

</select>


var a = ['12.00','13.00','14.00','15.00','16.00','17.00'];
var b = ['12.00','1.00pm','2.00pm','3.00pm','4.00pm','5.00pm'];
var d = [];

$('#isCheckedFormat').click(function() { 
    currenttime = $("#time1").val();
    console.log(currenttime);    
    if($('#isCheckedFormat').is(':checked')){
     d = a;
     c = 1;   
     $('#time1 option').remove();
     for(var i = 0; i<d.length; i++) {
            $('#time1').append('<option val="'+ c +'">'+d[i]+'</option>');
             c++;
         }
      $('#time1 option[val="currenttime"]').prop('selected',true);  

    }else{
     d = b;
     c = 1;
        $('#time1 option').remove();
     for(var i = 0; i<d.length; i++) {
            $('#time1').append('<option val="'+ c +'">'+d[i]+'</option>');
             c++;
    }
    $('#time1 option[val="currenttime"]').prop('selected',true);
 };   
});  

如何设置相应的时间？

Answer 1

像这样的事情应该做到这一点

var a = ['12.00','13.00','14.00','15.00','16.00','17.00'];
var b = ['12.00','1.00pm','2.00pm','3.00pm','4.00pm','5.00pm'];

function populate(e) {
    var val = $('#time1').find('option:selected').index(),
        sel = $('#time1').empty();

    $.each(e.target.checked ? b : a, function(i, time) {
        $('<option />', {
            value : time,
            text  : time,
            prop  : {
                selected : i === val
            }
        }).appendTo(sel);
    });
}

$('#isCheckedFormat').on('change', populate).trigger('change')

FIDDLE

您正在获取选项的值，尝试重置选项等，但是当您更改选项文本时您更改了值，因此永远不会匹配。我决定改用索引，它是一致的。