可能な別の実装があります。

INPUT 要素と SELECT 要素の両方を HTML に追加します。

STATES を定義した場合は、INPUT を作成display: none;し、選択するバリアントを SELECT に追加します。それ以外の場合は、 SELECT を作成するdisplay: none;ため、ユーザーには INPUT が表示されます。

実装と操作が簡単で、ユーザーにとって明確です。

テキスト入力を HTML に入れます。州を持つ国が選択されている場合は、入力を州 (または領土、州など) を持つ select 要素に置き換えます。JavaScript が有効になっていないか使用できない場合、ユーザーは手動で状態を入力します。

何かのようなもの：

<select name="country" onchange="updateState(this);">
  <option value="country0">country0
  <option vlaue="country1">country1
  <option>country...
</select>
...
<input type="text" name="state">


<script>
  function updateState(element) {
    if ( /* element.value has states */) {
      // replace ths.form.state with a select
      // of appropriate states
    } else {
      // replace this.form.state with a text input
    }
  }
</script>

ユーザーが州のある国を選択してから、州のない国を選択する可能性があるため、elseブロックが必要です。上記にはバリエーションがあります (例: 置換ではなく表示の切り替え)。適したものを選択してください。