How to auto select the state from an option list when using address autofill

Question

I made an form in HTML and the autofill feature on Chrome successfully fills in the street address, city, and zip. If I leave the "state" input with type="text", then it gets autofilled successfully as well. However, if I use a select/option dropdown list, then it does not get autofilled.

For the options, I tried using state abbreviations for the value like:

<label>
    <select>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
    <select>
    State
</label>

and I tried using the state name for the value:

<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>

And neither one works.

Is there a way to get Google Chrome's autofill to automatically select a state from a dropdown list when it is auto-filling the address?

Notes:

I'm interested in getting it to work for any other browsers/extensions that auto fill addresses for users, but I've only tested in Chrome.
a javascript solution would be acceptable, but it's not what I'm wanting. But, no jquery.

score 5 · Accepted Answer · answered Apr 25 '17 at 10:47

5

<select autocomplete="state">

will work too

answered Apr 25 '17 at 10:47

Devin McQueeney

1,277
2
14
31

3

[`address-level1`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values) and not of `state` seems to be correct now. tried in chrome, worked. – ᴍᴇʜᴏᴠ Jun 11 '20 at 13:36

score 2 · Answer 2 · answered Oct 19 '15 at 21:42

Embarassingly enough, 10 seconds after I posted this question, I realized that I didn't set the name on the select.

So, I changed it to:

<select name="state">
    <option ...>
<select>

and it works now, whether using the abbreviations or the full state name

How to auto select the state from an option list when using address autofill

2 Answers2