Question

我有一个任务，当我选择12小时单选按钮时，下拉值根据上午和下午变化，如果我选择24小时单选按钮，则下拉值为1到24.我能够实现这一点任务但现在选择框的值显示循环。怎么能达到这个目的。

我的代码是：

<select class="describe">
    <option name="name" value="1">select type</option>

  </select>
<div>
  <input type="radio" id="class" name="type" value="1" checked>12 hour <br/>
  <input type="radio" id="Club" name="type" value="2" >24 hour<br/>
</div>

jquery的：

<script>
    var listA = [
        { name: '1am', value: '1am' }, 
        { name: '2am', value: '2am' }, 
        { name: '3am', value: '3am' }
    ];
    var listB = [
        { name: '12', value: '12' }, 
        { name: '13', value: '13' }, 
        { name: '14', value: '14' }
    ];
    $(document).ready(function () {
        $('#class').bind('click', function () {
            $('.describe').empty();
            $.each(listA, function (index, value) {
                $('.describe').append(
                    '<option value="' + value.value + '">' + value.name + '</option>'
                );
            });
        });
        $('#Club').bind('click', function () {
            $('.describe').empty();
            $.each(listB, function (index, value) {
                $('.describe').append(
                    '<option value="' + value.value + '">' + value.name + '</option>'
                );
            });
        });
    });
</script>

选择代码的循环（由我试过）：

$(document).ready(function () {
    $('.seconds').each(function () {
        for (var i = 00; i <= 60; i++) {
            $('<option />').val(i).html('  ' + i).appendTo($(this));
        }
    });
});

Answer 1

应该这样工作：

    function fillHoursSelect(mode) {
        if(mode === 24) {
            $('.describe').each(function() {
                for(i = 0; i <= 23; i++) {
                    $('<option value="' + i + '">' + i + '</option>').appendTo($(this));
                }
            });
        }
        else if(mode === 12) {
            $('.describe').each(function() {
                for(i = 1; i <= 12; i++) {
                    $('<option value="' + i + 'am">' + i + 'am</option>').appendTo($(this));
                }
                for(i = 1; i <= 12; i++) {
                    $('<option value="' + i + 'pm">' + i + 'pm</option>').appendTo($(this));
                }
            });
        }
    }

    $('#Club').bind('click', function () {
        $('.describe').empty();
        fillHoursSelect(24);
    });
    $('#class').bind('click', function () {
        $('.describe').empty();
        fillHoursSelect(12);
    });

工作JSFiddle

Answer 2

function setupHourOptions(selectElement, format)
{
    var list = "";
    list +="<option value='-1'>select type</option>"
    for(var i = 0; i <= 24; i++)
    {
        var isAm = (Math.floor(i / 12) == 0);
        var hoursAmPm = (i % 12);
        if(hoursAmPm == 0) hoursAmPm = 12; 
        list +="<option value='" + i + "'>"
        list += format == '12h' 
        ? hoursAmPm + (isAm ? " am" : " pm" )
        : i;

        list +="</option>\n";

    }
    selectElement.html(list);
}

$(document).ready(
    function (){
        var hourFormatSelect = $("select.describe");
        $("input[name='hourformat']:radio").change(
             function ()
            {
                setupHourOptions(hourFormatSelect, this.value);
            }            
          );

        // set up default format at load
        var defaultFormat = $("input[name='hourformat']:checked").val();
        setupHourOptions(hourFormatSelect, defaultFormat);
    }
);

JsFiddle

我希望根据单选按钮在选择框中循环

2 个答案: