Javascript 如何从值1 AM、1:30 AM等创建选择列表？

创建一个react应用程序，在该应用程序中，我使用下拉菜单项创建一个值为1:00 am、1:30 am等的选择列表，直到第二天12:00 am

我已经创建了一个基本逻辑并将其发布在js fiddle上

我们能把它做得更好吗，它能工作，但它很凌乱，还有别的办法吗

$(function(){
    let i = 1;
    while(i <= 24) {
      let amPmCaption = i < 12 ? 'AM' : 'PM';
      let timeValue = i <= 12 ? i : i-12;
      $("select").append("<option>" + `${timeValue}: 00 ${amPmCaption}` + "</option>");
      $("select").append("<option>" + `${timeValue}: 30 ${amPmCaption}` + "</option>");
      i++;
    }
 })

$（函数（）{
设i=1；
虽然（i正如您所说，您正在使用material ui，但我建议使用带有
minutestep={30}
的
TimePicker
组件。请参阅文档

这可能比select更方便用户

getTimeSlotList() {
    let i = 1;
    let menuItems = [];
    while(i <= 24) {
      let amPmCaption = i < 12 ? 'AM' : 'PM';
      let timeValue = i <= 12 ? i : i-12;
      console.log('value of i = ', i);
      menuItems.push(
        <MenuItem key={i} value={i} primaryText={`${timeValue}: 00 ${amPmCaption}`} />,
        <MenuItem key={i*10} value={i*10} primaryText={`${timeValue}: 30 ${amPmCaption}`} />
      )
      i++;
    }
    return menuItems;
}

 <SelectField value={this.state.period} onChange={this.updateStartTime}>
    {this.getTimeSlotList()}
 </SelectField>