选择-镜像选项

Question

我有两个下拉菜单（html选择）。一个是公司列表，另一个是增值税代码列表。

视情况而定，我使用选择性添加公司和代码（如果不存在）或选择它们（如果存在）。

当选择一家公司时，我需要另一个选择（带有增值税代码）来更新并选择相应的增值税代码，反之亦然。

两个菜单之间的选项索引相同，但是我无法通过selectize来获得公司选择的索引。

菜单如下：

<select id="companies">
    <option value="company 1">company 1</option>
    <option value="company 2">company 2</option>
    <option value="company 2">company 2</option>
    </select>
    
    <select id="vat">
    <option value="vat 1">vat 1</option>
    <option value="vat 2">vat 2</option>
    <option value="vat 3">vat 3</option>
    </select>

公司1具有增值税1，公司2具有增值税2，依此类推。

我该怎么办？

<script>
$(document).ready(function(){
   $('$companies').selectize({
       create: true,
       createOnBlur: true,
       onChange: function(value) {
           var i = $("#companies").prop('selectedIndex');
           $('#vat option').eq(i).prop('selected', true);
    	}
    });
    $('$vat').selectize({
       create: true,
       createOnBlur: true,
       onChange: function(value) {
           var i = $("#vat").prop('selectedIndex');
           $('#companies option').eq(i).prop('selected', true);
    	}
    });
});
</script>

谢谢！