从API的结果中选择一个选择选项

问题描述

我有2个输入形式

<form method="post">
   <input type="number" class="form-control" name="clientcode" id="clientcode" required />
    <select class="form-control" name="checkgroup" id="checkgroup">
        <option value="chl">Child</option>
        <option value="ad">Adult</option>
        <option value="old">Old</option>
    </select>
    </div>
    <button class="btn btn-primary" type="submit">Check Group</button>
</form>

客户代码为5位数字。
我有一个api检查返回的组名（“ chl”或“ ad”或“ old”）

当我在“ clientcode”文本输入中输入5位数字时
我想执行api来检查组名
然后返回“旧”
，那么应该在“选择选项”中自动选择“旧”

已编辑的问题
感谢@Cbore的评论。

我已经写了一个ajax脚本

<script type="text/javascript">
    function getGroupCode(key) {
        if(clientcode.length == 5){
        $.ajax({
            url: 'api/?action=checkgroup&type=' + key,type: "GET",dataType: 'json',success: function (data,textStatus,jqXHR) {
                result = data;
                $("#checkgroup").val(result['groupcode']);
            },error: function (jqXHR,errorThrown) {
                alert('error')
            }
        });
        }
    }
</script>

我的html代码为

<form method="post">
     <input type="number" class="form-control" name="clientcode" id="clientcode" min="10000" max="99999" oninvalid="setCustomValidity('Enter Correct Code.')" onkeyup="getGroupCode(this.value)" required />
        <select class="form-control" name="checkgroup" id="checkgroup">
            <option value="chl">Child</option>
            <option value="ad">Adult</option>
            <option value="old">Old</option>
        </select>
        </div>
        <button class="btn btn-primary" type="submit">Check Group</button>
    </form>

我的第一个问题已使用此代码解决。当我输入5位数代码时，它将从api获取组代码并自动选择“选择”选项。

现在我在验证时遇到错误
如果我在客户代码中输入7位数字，然后按Submit，我将收到一条错误消息，为
我在输入中设置的“输入正确的代码”
在不刷新页面的情况下，我删除了2位数字，现在变成了5位数字
然后按提交，但仍显示错误为“输入正确的代码”

我必须刷新页面，并且必须输入正确的5位数才能使用。

解决方法

根据需要进行修改。

function myApi(){

return 'old';

return ['chl','ad','old'][Math.floor(Math.random()*3)];

}


function myCheck(){
event.preventDefault();
var oldCk = false

if(myApi() == 'old')oldCk = true;

if(oldCk){

document.getElementById('checkgroup').value='old';

}


}

<form method="post">
   <input type="number" class="form-control" name="clientcode" id="clientcode" required />
    <select class="form-control" name="checkgroup" id="checkgroup">
        <option value="chl">Child</option>
        <option value="ad">Adult</option>
        <option value="old">Old</option>
    </select>
    
    <button class="btn btn-primary" type="submit" onClick='myCheck()'>Check Group</button>
</form>