Question

我有一个复选框，可将时间设置为24或12小时格式。如果用户检查或取消选中此项，我希望以备用时间格式将当前时间设置为同一时间。因此，如果时间目前是17:00，则应设置为下午5点。目前它只是将它设置回第一个选项值。这是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

您正在获取选项的值，尝试重置选项等，但是在更改选项文本时更改了值，以便从不匹配。我决定使用索引，这是一致的。

Answer 2

只添加两行：

1）一行到保存当前所选值的索引：

var x = $('#time1').find('option:selected').index();

2）使用保存的索引设置所选值一行：

$('#time1').val(d[x]);

代码将是这样的：

...
$('#isCheckedFormat').click(function() { 
    ...
    console.log(currenttime);
    var x = $('#time1').find('option:selected').index();   // ADDED
    if($('#isCheckedFormat').is(':checked')){
        ...
    }else{
         ...
         for(var i = 0; i<d.length; i++) {
                $('#time1').append('<option val="'+ c +'">'+d[i]+'</option>');            
                $('#time1').val(d[x]);                    // ADDED
                c++;
        }
        ...
    };   

});

Answer 3

注意：这只是一个快速解决方案，整个设置看起来有点不方便。

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();
    element = $("#time1 option:selected").index();
    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:eq('+element+')').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:eq('+element+')').prop('selected',true);
    };   

});

根据另一个下拉列表的选项值设置一个下拉列表的文本

3 个答案: