html - 选择标签显示不正确

Question

代码如下:

            <td><input class='datepicker' size=10 style='margin-left:auto;margin-right:1%;' id='endDate_0' placeholder='End Date' />
            </td>
            <td><select class='select_time' width='30%' size=5 id='startTime_0'></select>
            </td>
            <td><select class='select_time' width='30%' size=5 id='endTime_0'></select>
            </td>

选择的CSS:

select{
    background: #ffffff;
    padding: 3px;
    font-size: 14px;
    font-family: Arial;
    border: 1px solid #ccc;
    letter-spacing: 1px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    width:100%;
}

js:

var select_time='<option value="0">0000 hrs</option>
<option value="100">0100 hrs</option>
<option value="200">0200 hrs</option>
<option value="300">0300 hrs</option>
<option value="400">0400 hrs</option>
<option value="500">0500 hrs</option>
<option value="600">0600 hrs</option>
<option value="700">0700 hrs</option>
<option value="800">0800 hrs</option>
<option value="900">0900 hrs</option>
<option value="1000">1000 hrs</option>
<option value="1100">1100 hrs</option>
<option selected value="1200">1200 hrs</option>
<option value="1300">1300 hrs</option>
<option value="1400">1400 hrs</option>
<option value="1500">1500 hrs</option>';

$('.select_time').html(select_time);

这是我得到的输出

我无法弄清楚为什么选择标签没有正确显示，我们将不胜感激。

Answer 1

如果您想选择框而不是列表框，请从 select 标签中删除大小。

<select class='select_time' width='30%' id='startTime_0'>