如何使两个select联动

最近在用flask写一个数据看板，其中有一个图表，要用到联动下拉选项，比如我在A选项中已经选定了数据范围，B选项就也要实时更新，避免选项对不上，或者返回数据为空的情况。

具体实现是先让A选项绑定一个函数，选项变更时（οnchange=function()）触发ajax获取更新后的必选项，然后修改B选项内的子项，代码如下：

<select id="selectA" onchange="changeValue()">
    <option value="partition">部分</option>
    <option value="all">全部</option>
</select>
<select id="selectB" onchange="dosomething()">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

function changeValue(){
    var choice = document.getElementById(selectA).value
    $.ajax({
        type: "GET",
        url: "http://127.0.0.1:5000/alter_option/"+choice
        success: function (result) {
                var option = result["newoptions"]
                var str = ""
                for(var i = 0; i<option.length; i++){
                    str += "<option value='"+option[i]+"'>"+option[i]+"</option>"
                }
                document.getElementById("selectB").innerHTML = str
 });

大概就是这个意思了，声明choice的原因是要获取当前的选项是哪一个，如果再调整回去原来的选项就再请求一次。

我本来想的更简单，因为都是从数据库里面取的数据，我刚开始想着直接在flask渲染template的时候就传options过来，onchange的时候js里面用{{options}}就行也不用ajax请求了，后来发现js里面不能用{{}}，还得传，而且不是json格式还会报错，后端就重写了个方法传json过来