选择PHP/jQuery国家/州表单字段

我编写了一个地址表单,它使用API将国家拉入一个select输入,然后jQuery/ajax将相关的州/地区填充到另一个select输入。除了一些国家没有可供使用的州/地区(Å陆地岛屿)外,这种方法也适用。在这些情况下,我被迫包含一个“其他状态”字段,所以我用文本输入替换它。

我的问题是当我选择不同的国家时;如果我选择了一个没有州/地区的国家,它会切换到文本输入,但一旦我选择了另一个国家,它就不会切换回来。

jQuery:

$("#inputCountry").on('change', function () {
    $.getJSON("ajax/changecountry?country=" + $(this).val(), function (data) {
    })
    .then(function (data) {
        var string = '';
        $.each(data, function (i, o) {
            string += '<option value="' + i + '">' + i + '</option>';
        });
        if (string !== '') {
            $('#inputState').html(string);
        } else {
            $('#inputState').replaceWith('<input id="inputOtherstate" placeholder="State or Region" type="text" class="form-control" name="other-state" />');
        }
    })
    .then(function () {
        $('#inputState').val($('#userstate').val()); 
    });
}).change();

领域:

<div class="col-md-3">
    <label for="inputCountry" class="form-label">Country</label>
    <select class="form-select" aria-label="Address Country" id="inputCountry" name="country">
        <?php
         foreach ($countries as $name => $code) {
            echo ($code==='US') ? '<option value="' . $code . '" selected>' . $name . '</option>' : '<option value="' . $code . '">' . $name . '</option>';
        }
        ?>
    </select>
</div>
<div class="col-md-3">
    <label for="inputState" class="form-label">State</label>
    <select class="form-select" aria-label="Default select example" id="inputState" name="state">
        <option selected>Select a country...</option>
    </select>
    <input type="hidden" id="userstate" value="<?= isset($user['state']) ? $user['state'] : '' ?>" />
</div>