How do I display a javascript value in dropdown field?

Question

I got a trivial ask but I can't seem to work it out elegantly. I have an HTML form where I want to display the date (today & next 2 days, dd/mm) using javascript. The page is built on jQueryMobile.

Here's my 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>

Here's my 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

Here's the JSFiddle

How would you go about this ?

Thanks Greg

Yeah, see, `document.write` just isn't a good idea. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — isherwood, Jun 26 '14 at 18:06

score 1 · Accepted Answer · answered Jun 26 '14 at 18:11

Take a look at this: http://jsfiddle.net/S8HZV/1/

I added an id to the options and I added 3 more lines to the script. Try using innerHTML instead of 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;

Thanks for that Mark. Probably stating the obvious, but when you add these lines to your code, make sure the JS comes after your form... Otherwise, there's nowhere to load the date into ! — Greg, Jun 27 '14 at 09:55

score 1 · Answer 2 · answered Jun 26 '14 at 18:14

You can create the option elements and insert them into the select with javascript.

For example, this is how you would add today as an option to the departure select

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

score 1 · Answer 3 · answered Jun 26 '14 at 18:21

For another option, this sets the value, too.

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;

Guess it's more cross-browser compliant. Good to know ! – Greg Jun 26 '14 at 18:36 — Greg, Jun 26 '14 at 18:36

How do I display a javascript value in dropdown field?

3 Answers3