# State Dropdown in Address Field

**URL:** <https://forums.knack.com/t/state-dropdown-in-address-field/14296>\
**Category:** API & Custom Code\
**Created:** [May 23, 2023, 6:01am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296 "2023-05-23T06:01:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [May 23, 2023, 6:01am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/1 "2023-05-23T06:01:26Z")

</div>

On the occasion where you want to restrict the State dropdown value to a set list (e.g. US states), below is a slice of code to replace the current text input with a selection list:

Insert the following code into the JavaScript section of your Knack app.

```auto
$(document).on('knack-view-render.any', function(event, view, data) {
  const states = [
    "", "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID",
    "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS",
    "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK",
    "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV",
    "WI", "WY"
  ];

  $("input#state.input").each(function () {
    const currentValue = this.value;
    const $stateComboBox = $("<select>", {
      "data-placeholder": "Select",
      "id": "state",
      "name": "state",
      "class": "select",
    });
    $.each(states, function(index, state) {
      $stateComboBox.append($("<option>").text(state));
    });
    $stateComboBox.val(currentValue);
    const $selectDiv = $("<div>", {
      "class": "kn-select",
    }).append($stateComboBox);
    $(this).replaceWith($selectDiv);
  });
});

```

- ` states` will contain an array of all your State selections. If you’re Australian like me, you could replace the array with `["","ACT","NSW","QLD","SA","TAS","VIC","WA"]`. I recommend keeping a blank selection at the start of the array.
- `$stateComboBox` declares a `<select>` element with similar `id` and `name` to the existing State field
- `$selectDiv` declares a `<div>` that matches properties of a native Knack combo box, so that the styling is maintained

I also highly recommend inserting this slice of code into the CSS section if your Knack app, which will give a little more room for the dropdown arrow:

```auto
/* Adjust City and Zip fields to give more room for State when in mobile view */
.kn-input-address .is-grouped>.control:first-child
{
  flex: 3 !important;
}

.kn-input-address .is-grouped>.control:last-child
{
  flex: 1 !important;
}

```

The result should look like below:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/f/f927b185d418c9ad8196906eb642b118ace942da.png)

This solution works in regular and in-line editing forms, is compatible with auto-complete, but will not work in the Builder.  
This piece of code can also be adjusted to replace any other text field with a combo box if you want to restrict other values (e.g. title in a name).

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [May 23, 2023, 6:33am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/2 "2023-05-23T06:33:30Z")

</div>

@StephenChapman - this is terrific, thanks!

---

<div class="post-metadata">

**Author:** ![Ally](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/ally/32/2456_2.png) [@Ally](https://forums.knack.com/u/Ally)\
**Post date:** [May 23, 2023, 8:41am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/3 "2023-05-23T08:41:00Z")

</div>

Fantastic!

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [May 23, 2023, 9:32am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/4 "2023-05-23T09:32:43Z")

</div>

Nice one @StephenChapman 🚀

---

<div class="post-metadata">

**Author:** ![Paul5](https://avatars.discourse-cdn.com/v4/letter/p/b5a626/32.png) [@Paul5](https://forums.knack.com/u/Paul5)\
**Post date:** [September 1, 2023, 4:06am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/5 "2023-09-01T04:06:57Z")

</div>

Seems everyone forgets we also have DC, not a state but we still use it.

---

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [September 1, 2023, 5:31am UTC](https://forums.knack.com/t/state-dropdown-in-address-field/14296/6 "2023-09-01T05:31:35Z")

</div>

I’m Australian, so I barely know your states at all! Haha.  
You can adjust the code by adding in `"DC",` to the existing list.