javascript set dropdown value to month not working in IE11

Question

I am using the following code to set a drop-down value to the current month, it is working in Chrome and Edge but in IE 11 the value is empty.

month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month

month contains the value "Jul" and is of type string, and I can set it as the value of a text box.

If I manually assign month = "Jul", it does set the value on the drop-down.

Have you added a `console.log("month is: " + month)` to verify that `.toLocaleString()` is doing what you think it's doing? — Pointy, Jul 04 '18 at 10:49
Well one string that's really `"Jul"` is the same as any other string that's `"Jul"`, so what you're describing makes no sense. — Pointy, Jul 04 '18 at 11:21

score 1 · Accepted Answer · answered Jul 04 '18 at 11:53

IEs toLocalString() adds some invisible Unicode characters to the string so the value of the dropdown-option and the value of month are not actually the same.

If it won't cause cross-locale compatibility issues then you can trim these characters with replace.

Alternatively, if you know the order of your dropdown list then get the month as a number and use selectedIndex

currentDate = new Date()
locale = 'en-US'
month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month.replace(/[^A-z]/g,'')

// Alternatively
//document.getElementById("month").selectedIndex = currentDate.getMonth();

<select name="dates" id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option> 
<option value="Aug">Aug</option> 
<option value="Sep">Sep</option> 
<option value="Oct">Oct</option>
<option value="Nov">Nov</option> 
<option value="Dec">Dec</option>
</select>

javascript set dropdown value to month not working in IE11

1 Answers1