选择依赖于同一页面中其他选定父选项的选项

Question

我有一个包含两个选择字段的页面。项目选择和公司选择。

字段的现有数据。粗体是项目，斜体是公司。

阿萨斯 --Fa_测试

数据 --Fa_Test0, --Fa_Test1, --Fa_Test2

ELTC --Fa_Test3, --Fa_Test4

页面加载后的第一个视图。

选择第一个项目时查看。 标准只有一家公司，无法更改（文本输入字段）

选择另一个项目时查看。

仅当使用以下查询在第一个字段中选择项目时，才会出现公司选择字段。

<script>
$(function () {
    $("#project_ou").on( "change", function () {
        // ASAS
        if ($(this).val() == "empty") {
            $("#company_select").hide();
            $("#Other").hide();
        } if ($(this).val() ==  "ASAS"){
            $("#Other").show();
            $("#company_select").hide();
        } if ($(this).val() != "ASAS"){
            $("#company_select").show();
            $("#Other").hide();
        }
    });
});
</script>

公司选择应根据项目显示，无需重新加载页面。

数据通过以下python代码传递到页面：

...
...
return render_template('portal/prov_new_device_first.html',
                      projects=projects,
                      companies=companies)

prov_new_device_first.html 上的 html 页面部分如下所示：

<div class="callout callout-warning">
     <label>Please select a Project or Division.</label><br>
     <div class="form-group">
         <select name="project_ou" class="select_proj form-control" id="project_ou">
             <option value="empty" selected>- - Select from the list - -</option>
                {% for project in projects %}
                    <option value="{{ project.name }}" id="{{ project.name }}">{{ project.name }}</option>
                {% endfor %}
        </select>
    </div>
    <div class="form-group" id="Other" style="display:none;">
        <label for="txtReason">Division (Standard)</label><br>
            {% for company in companies %}
               {% if company.destinationindicator == "ASAS" %}
                  <input type="text" value="{{ company.name }}" class="form-control" name="txtReason" disabled>
               {% endif %}
            {% endfor %}
    </div>
    <div class="form-group" id="company_select" style="display:none;">
        <label for="companyname">Please select the company where the Bootstick will be added.</label><br>
            <select name="companyname" class="form-control select_proj" id="companyname">
                <option selected>- - Select a Company</option>
                    {% for company in companies %}
                       {% if company.destinationindicator == project.name %}
                          <option value="{{ company.name }}" id="{{ company.name }}">{{ company.name }}</option>
                       {% endif %}
                    {% endfor %}
            </select>
     </div>
</div>

选择项目时如何选择正确的项目所属公司数据？

我花了很多时间和很多选项试图将项目名称转移到这个地方，但没有成功。

{% if company.destinationindicator == project.name %}

公司属性中的目的地指示符包含依赖的项目名称。

有人对如何解决这个问题有任何想法吗？

提前致谢。

Answer 1

代码

{% if company.destinationindicator == project.name %}

应该被执行
在

{% for project in projects %}

上班。

但是此代码是在将 HTML 发送到浏览器之前在服务器上执行的 - 所以对于这个问题来说它是无用的。

你必须使用

JavaScript

来解决这个问题。

JavaScript

可以做以下一件事：

• 选择项目时将所有

  <option>

  替换为公司 - 但可能需要大量代码，并且需要将所有数据保留在

  JavaScript

  中。
• 使用

  company.destinationindicator

  作为

  class

  中的

  <option>

  ，以后它可以隐藏所有

  <option>

  并仅显示具有所选

  <option>

  的

  class

  。
  

此代码将所有公司添加到

project.name

，其中

<option>

为

company.destinationindicator

class

此代码隐藏所有

<option selected>- - Select a Company</option>
{% for company in companies %}
<option value="{{ company.name }}" id="{{ company.name }}" class="{{ company.destinationindicator }}">{{ company.name }}</option>
{% endfor %}

，稍后仅显示

<option>

，其中

<option>

具有所选项目的名称class

带有用于测试的虚假数据的最小工作代码：

---

我使用

    } if ($(this).val() != "ASAS"){
        $("#company_select").show();
        $("#Other").hide();
    
        $("#company_select option").hide();                // hide all `option`
        $("#company_select option."+$(this).val()).show(); // show only options with selected project name
    }

而不是

render_template_string

，这样每个人都可以将其复制到一个文件进行测试。render_template