如何在下拉字段中显示JavaScript值？

Question

我提出了一个小问题，但我似乎无法优雅地解决。 我有一个HTML表单，我想在其中使用javascript显示日期（今天和接下来的2天，dd / mm）。 该页面基于jQueryMobile构建。

这是我的HTML

<form>
<select name="departure" id="departure">
        <option ><script>document.write(today);</script></option>
        <option ><script>document.write(tomorrow);</script></option>
        <option ><script>document.write(dayaftertomorrow);</script></option>
</select>
</form>

这是我的Javascript

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
if(dd<10) {
    dd='0'+dd
} 
if(mm<10) {
    mm='0'+mm
} 
today = dd+'/'+mm;

//---------- 
var tomorrow = new Date(new Date().getTime() + 86400000);
var day = tomorrow.getDate()
var month = tomorrow.getMonth() + 1
if(day<10) {
    day='0'+day
} 
if(month<10) {
    month='0'+month
} 
tomorrow = day+'/'+month

//---------- 
var aftertomorrow = new Date(new Date().getTime() + 172800000);
var afterday = aftertomorrow.getDate()
var aftermonth = aftertomorrow.getMonth() + 1
if(afterday<10) {
    afterday='0'+afterday
} 
if(aftermonth<10) {
    aftermonth='0'+aftermonth
} 
aftertomorrow = afterday+'/'+aftermonth

这是JSFiddle

您将如何处理？

谢谢格雷格

Answer 1

看看这个： http : //jsfiddle.net/S8HZV/1/

我在选项中添加了ID，并在脚本中添加了3行。 尝试使用innerHTML代替document.write。

HTML：

<form>
<select name="departure" id="departure">
    <option id="today"></option>
    <option id="tomorrow"></option>
    <option id="dayaftertomorrow"></option>
</select>
</form>

JavaScript：

document.getElementById('today').innerHTML= today;
document.getElementById('tomorrow').innerHTML= tomorrow;
document.getElementById('dayaftertomorrow').innerHTML= aftertomorrow;

Answer 2

您可以创建选项元素并将其插入到使用javascript的select中。

例如，这就是您今天将作为选项添加到出发选择中的方式

 var select = document.getElementById('departure');
 var option = document.createElement('option');
 option.innerHTML = today;
 select.appendChild(option);

Answer 3

对于另一个选项，这也会设置该值。

http://jsfiddle.net/isherwood/S8HZV/5/

document.getElementById('departure').options[0].val = today;
document.getElementById('departure').options[0].text = today;

document.getElementById('departure').options[1].val = tomorrow;
document.getElementById('departure').options[1].text = tomorrow;

document.getElementById('departure').options[2].val = aftertomorrow;
document.getElementById('departure').options[2].text = aftertomorrow;