我想在 django 中使用 Javascript 为我的网页创建一个下拉列表

Question

根据第一个下拉列表中选择的列的数据类型，第二个下拉列表的列应显示以下 Javascript 字典中的值， 注意：这里{{col.1}}给出SQL列数据类型的详细信息，如varchar，int

在我的html代码下面：

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Modal Header</h4>
                <!--                      <h4 class="modal-title">Modal 
                Header</h4>-->
                <button type="button" class="close" data-dismiss="modal">&times;</button>


            </div>
            <div class="modal-body">
                <p>This is a small modal.</p>
                <p>
                    <select id="columnname" name="columnname" class="form-control"
                            onchange="changecat(this.data-val);">
                        <!-- onchange="populatefilter()"-->
                        {% for col in column_names_nd_Data_type_tupl %}
                        <option data-val="{{col.1}}" value=" {{col.1}}"> {{col.0}},{{col.1}}
                        </option>

                        {% endfor %}
                    </select>
                    <br>
                <hr>
                </select>
                <select name="datatype" id="datatype">
                    <option value="" disabled selected>Select</option>
                </select>

                <hr>

                <select id="datatype" name="datatype" class="form-control">


                    <option value="<"> less than</option>
                    <option value=">"> Greater than</option>
                    <option value="="> equal to</option>


                </select>


                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的 Javascript：

<script type="text/javascript">
var mealsByCategory = {
    bigint: ["<", ">", "=<", ">="],
    varchar: ["contains", "exact", ],
    datetime: ["options", "<", ]
}

    function changecat(value) {
        if (value.length == 0) document.getElementById("datatype").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in mealsByCategory[value]) {
                console.log("value",+value)
                catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
            }
            document.getElementById("datatype").innerHTML = catOptions;
        }
    }
</script>

如何显示基于数据类型的SQL过滤操作？

Answer 1

它改变了getAttribute的方法

function changecat(value) {
    if (value.length == 0) document.getAttribute("data-val").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in mealsByCategory[value]) {
            console.log("value",+value)
            catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
        }
        document.getElementById("datatype").innerHTML = catOptions;
    }
}