javascript - 过滤数据列表输入

Question

我有两个下拉列表输入，它们都来自 datalist，我希望根据用户选择的输入来过滤其他输入以仅显示相关结果。

我正在将数据从 python 渲染回 HTML 页面

数据包含公司名称和银行帐号，

所以我想根据用户选择的公司只向所选公司显示相关帐户

<form id="the_form" method="POST">
    {% csrf_token %}
    From:
    <input name="start_date" class="datepicker" type="date" value={{start_date}}/>
        To:
    <input name="end_date"  class="datepicker" type="date" value={{end_date}}/>
    <input type="text" list='List_of_Companies' data-search-in="Company" id="Input1" name="Companyname"  placeholder="Choose a Company"  value="{{ Company}}"/>
    <input type="text" list='List_of_Accounts' data-search-in="Account" id="Input2" name="Accountname"  placeholder="Choose an Account ID" value="{{ Account_Id}}"/>

    <br>  <br> 

    <button name="action" type="submit" id="showccounts" value="show">Show</button>
    <button name="action" type="submit" value="download">Download</button>

    <datalist id="List_of_Companies">
        <select id="filenamelist" size="5"  class="select">
            {% for Company in  info_list %}
            <option value="{{ Company.3 }}">{{  Company.3 }}</option>
            {% endfor %}
        </select>
    </datalist>

    <datalist id="List_of_Accounts">
        <select id="filenamelist" size="5"  class="select">
            {% for Company in  info_list %}
            <option value="{{ Company.0 }}">{{  Company.3 }}</option>
            {% endfor %}
        </select>
    </datalist>
</form>


{% load staticfiles %}

<div id="loading" style="width:300px;height:300px;display:table-cell; vertical-align:middle; text-align:center">
    <img  src="{% static "app/images/Loading_icon.gif" %}" style="margin:auto">
</div>
<table id="theTable" hidden>
    <thead>
        <tr>
            {% for c in columns %}
            <th>{{ c }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for r in rows %}
        <tr>
            {% for c in r %}
            <td>{{ c }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

{% endblock %}


{% block scripts %}
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

标签： javascripthtmlhtml-datalist