使用 JQuery 和 Flask 的動態下拉不起作用

Question

嗨，我正在使用 Flask 編寫一個小應用程序。 我必須根據數據庫的輸出更新下拉菜單。 我無法動態添加選項。

Javascript代碼：

<script type="text/javascript">
   function filldata(){
      var sample = document.getElementById("filter-select").value;
      jQuery.support.cors = true;
      $.post("/test",{"filter_type":sample},function(data,status){
          var tmp = data.output;
          alert(tmp.length);
          var sel = document.getElementById('further-select');
          for(var i =0;i<tmp.length;i++){
             console.log(tmp[i]);
             alert("<option>"+tmp[i]+"</option>");
             var opt = document.createElement('option');
             opt.innerHTML = tmp[i];
             opt.value = tmp[i];
             sel.appendChild(opt);
           }
      });
   }
</script>

服務器代碼：

@app.route('/test',methods=['POST'])
def test():
    tmp = request.form.get('filter_type')
    con = mdb.connect('localhost', 'root', 'root', 'sample')
    cur = con.cursor()
    cur.execute("SELECT DISTINCT "+tmp+" FROM logdata")
    res = cur.fetchall()
    con.close()
    return jsonify(output=res)

我可以知道我哪里出錯了嗎？ 謝謝你。

編輯：

我已經包含了 HTML 代碼。

HTML：

<div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ts"><i class="fa fa-fw fa-dashboard"></i> Time Period <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ts" class="collapse">
                            <select id="time-stamp">
                                <option value="Till now">Till Now</option>
                                <option value="Yesterday">Yesterday</option>
                                <option value="Last Week">Last Week</option>
                                <option value="Last Month">Last Month</option>
                                <option value="Last 6 months">Last 6 months</option>
                                <option value="Customize">Customize</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ns"><i class="fa fa-fw fa-arrows-v"></i> Select Nodes <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ns" class="collapse">
                            <select id="nodes-select" multiple="multiple">
                                <option value="Till now">Till Now</option>
                                <option value="Yesterday">Yesterday</option>
                                <option value="Last Week">Last Week</option>
                                <option value="Last Month">Last Month</option>
                                <option value="Last 6 months">Last 6 months</option>
                                <option value="Customize">Customize</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#fs"><i class="fa fa-fw fa-arrows-v"></i> Select Filter <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="fs" class="collapse">
                            <select id="filter-select" onchange="filldata()">
                                <option value="mac">MAC</option>
                                <option value="sublbl">SUBLBL</option>
                                <option value="vrf">VRF</option>
                                <option value="ifhndl">IFHNDL</option>
                                <option value="compid">COMP_ID</option>
                                <option value="v4addr">V4_ADDR</option>
                                <option value="v6addr">V6_ADDR</option>
                            </select>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#ff"><i class="fa fa-fw fa-arrows-v"></i> Select items <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="ff" class="collapse">
                            <select id="further-select" multiple="multiple" >

                            </select>

                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#cs"><i class="fa fa-fw fa-bar-chart-o"></i> Charts <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="cs" class="collapse">
                            <select id="chart-select">
                                <option value="error_info">Error Info</option>
                                <option value="session_history">Session History</option>

                            </select>
                        </ul>
                    </li>

                </ul>
            </div>

Answer 1

您編寫了一個 Javascript 函數，但從未調用過它。 您應該將代碼放在某種類型的 $document.ready() 中。

Answer 2

這是一個更一般的答案。 我在這里發布它是因為這個問題最密切相關並且可能會出現在搜索中。

在我的情況下，jQuery 顯示為已加載但拒絕觸發，因為（最終我意識到）我將 jQuery 放在一個腳本塊中，該腳本塊比 jQuery cdn 更早導入：

基本文件

<body>
    <div>Stuff on page...</div>

    {% block scripts %} {% endblock %} <!-- pulling scripts in from a child template -->
    <script src="https://jquery.example.com"></script>

</body>

一旦我改變了它們，它就完美地工作了。

<body>
    <div>Stuff on page...</div>

    <script src="https://jquery.example.com"></script>
    {% block scripts %} {% endblock %}

</body>

有時解決方案是如此簡單，以至於沒有人費心將其張貼在任何地方，然后像我這樣的人就完全陷入困境。 所以就在這里，希望它可以為其他人節省我失去的時間。