Javascript 我想根据单选按钮在选择框中循环

我有一个任务，当我选择12小时单选按钮时，下拉列表的值根据am和pm变化，如果我选择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>

选择类型
12小时

24小时

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>

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'}
];
$（文档）.ready（函数（）{
$（'#class'）.bind（'click'，function（）{
$（'.descripe'）.empty（）；
$.each（列表、函数（索引、值）{
$（'.descripe'）。追加(
“”+value.name+“”
);
});
});
$（'#Club'）。绑定（'click'，函数（）{
$（'.descripe'）.empty（）；
$.each（列表B，函数（索引，值）{
$（'.descripe'）。追加(
“”+value.name+“”
);
});
});
});

选择代码的循环（我已尝试）：

$（文档）.ready（函数（）{
$（'.seconds'）。每个（函数（）{
对于（var i=00；i而言，应采用以下方式：

    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);
    });

函数fillHoursSelect（模式）{
如果（模式===24）{
$（'.descripe'）。每个（函数（）{
对于（i=0；i
函数设置选项）（选择元素，格式）
{
var list=“”；
列表+=“选择类型”
for（var i=0；i，其中是类为“seconds”的元素）在你的html代码中？对于秒1到60…jwulf意味着html中没有
seconds
，它只是一个选择框。这是你需要的吗？还是我把你的问题搞错了，秒的事情已经开始了，你想在小时部分做同样的事情？是的，你的ans是对的，但这不是我的问题。我的问题是当我点击12时r然后我的下拉列表值更改为select循环而不是（var listA=[{name:'1am'，value:'1am'}，{name:'2am'，value:'2am'}，{name:'3am'，value:'3am'}]；）手动添加。24小时相同。编辑了答案。这就是你要找的？我对上午/下午系统不太熟悉，所以如果上午12点和下午12点出错，你可能需要检查/更改。但你可以自己检查/更改。对吗？啊，对不起，我不小心拒绝了编辑（或者我根本没有这样做？还不熟悉编辑系统…）这在我的代码中将seconds类更改为descdribe。但是@A.Kalkhoff提供的fiddle可以工作，因为那里的类名是正确的。
    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);
    });

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);
    }
);