JS中select修改 原生动态添加options并选中

项目中又遇到一个小问题，测试完了都没发现~~ （醉）
就是在账户添加时有两项超长的select下拉框的option列表是从服务端获取的，修改时的策略是直接请求数据构造成两个option赋值给两个select，然后给select设置value选中即可，而且这两项select为不可修改项（置灰项）。没毛病…一只是okay的，直到有个测试er说一次返回这么多东西，请求响应有延迟，建议把下拉改为可搜索的。。。pm说改为每次响应只需要关键字前20条即可，问题来了。。。。。。。。前端只加了搜索功能，并没针对修改功能做修改，刚上线有人试用了一下，说修改每次都带不出那两项select，但是数据有响应，
我用了一遍确定是select的的value没有可以匹配的text，因为请求接口时服务端默认给了钱二十条数据，无匹配内容~ 测试之所以没测出来，是因为测试数据太少了，每次都会匹配的数据响应回来。
怎么搞，直接把修改接口获取数据的text当做关键字去请求接口么？ 没有，不是没想过这种方法，某种角度来看这种其实更加省时省力，但是避免代码冗余和以后的潜在问题，其次，该项仅作为展示项，又拿到了可展示数据，就不用浪费资源再次请求了，所以就没考虑这种方法，而是选择用name， value构造一个option，然后选中置灰。。。

var selection = document.getElementById("Dot")
selection.options.add(new Option(name, value)); 
selection.children[0].selected=true;

当然这个是替别人紧急修复的一个js小问题，老项目没用啥ui库，全是原生写的，新的项目新的控件库有更好的选择，比如直接赋值option value mvvm双向即可选中。