Question

我使用CMS创建了一个事件页面，我们可以将其称为蓝图，因为它将被复制以创建子事件，并且我在蓝图中所做的任何更改都可以下推到所有子事件。

在我的蓝图中，我有一个调查，其中有一个下拉问题要求用户选择其部门。

根据选择的分区，下一个问题将过滤该分区可用的区域列表。

我正在尝试定位一个<option></option>元素，其中id由系统分配，但是id对于每个复制的事件都是不同的。

  function showHideTEAM(selectedValue){
    if (selectedValue != "NORTH" && selectedValue != "NORD" && selectedValue != "TEAM CANADA") {
      $("#1684_53515_8_169135 > option").each(function() {
        if($(this).val() == "TEAM CANADA") {
          $(this).remove();
        }
      });
    }
    if (selectedValue == "TEAM CANADA") {
      $("#1684_53515_8_169135 > option").each(function() {
        if($(this).val() != "TEAM CANADA") {
          $(this).remove();
        }
      });
    } 
  }
  if ($("#1684_53515_7_169134").length > 0) {
    $("#1684_53515_7_169134").on("change", function(event) {showHideMELLON($(this).val());});
  }

打算发生的是

如果用户在id="1684_53515_7_169134"中选择“北”（如果使用英语）或“北”（如果使用法语），则下一个问题的过滤下拉列表（id="1684_53515_8_169135"）会将TEAM CANADA包括到列表中。到目前为止，尽管复制和id发生了变化，但这似乎仍然有效，但我不确定为什么。

如果在id="1684_53515_7_169134"中选择了TEAM CANADA，那么下一个问题id="1684_53515_8_169135"应该删除所有选项，而只有TEAM CANADA作为选项。

我知道在加拿大两次举办TEAM CANADA是没有意义的，但这是必需的。

一些其他信息，所有事件页面共享一个页面包装器，但事件页面彼此分开。事件页面之间的注册流程（出现此调查的地方）也分开。那么，为什么系统会为每个事件中我不知道的相同字段的每个事件生成一个新的ID号。

例如：

BLUEPRINT：

<div class="form-content">
    <span class="survey-question-number-container">
        <span class="field-required"></span>
        <span class="field-number survey-question-number">
            4.
        </span>
    </span>
    <span class="input-container">
        <label for="1684_53515_7_169134">
            <span class="aural-only">Field Is Required</span>
            <span class="input-label">Select Division</span>
        </label>
        <span class="ungrouped">
            <select name="1684_53515_7_169134" id="1684_53515_7_169134" onchange="choiceSelected('1684_53515_7_169134', this.selectedIndex);">
                <option value="NOREPLY">Please select response</option>
                <option value="NORTH">NORTH</option>
                <option value="EAST">EAST</option>
                <option value="WEST">WEST</option>
                <option value="SOUTH">SOUTH</option>
                <option value="TEAM CANADA">TEAM CANADA</option>
            </select>
        </span>
    </span>
</div>

，然后选择一个选项（例如NORTH）时，加拿大队将获得以下列表。

<div class="form-content">
    <span class="survey-question-number-container">
        <span class="field-required"></span>
        <span class="field-number survey-question-number">
            5.
        </span>
    </span>
    <span class="input-container">
        <label for="1684_53515_8_169135">
            <span class="aural-only">Field Is Required</span>
            <span class="input-label">Select Team</span>
        </label>
        <span class="ungrouped">
            <select name="1684_53515_8_169135" id="1684_53515_8_169135" onchange="choiceSelected('1684_53515_8_169135', this.selectedIndex);">
                <option value="NOREPLY"></option>
                <option value="FRIENDS AND FAMILY">FRIENDS AND FAMILY</option>
                <option value="THE RETIREES">THE RETIREES</option>
                <option value="ADMINISTRATION &amp; ADMINISTERED">ADMINISTRATION &amp; ADMINISTERED</option>
                <option value="ADMINISTRATION - OTHER">ADMINISTRATION - OTHER</option>
                <option value="CORPORATE DEVELOPMENT GROUP">CORPORATE DEVELOPMENT GROUP</option>
                <option value="CORPORATE SECRETARY">CORPORATE SECRETARY</option>
                <option value="GLOBAL REG AFF &amp; RISK CONTROLS">GLOBAL REG AFF &amp; RISK CONTROLS</option>
                [..another 10 options..]
                <option value="TEAM CANADA">TEAM CANADA</option>
            </select>
        </span>
    </span>
</div>

如果您要在该部门中选择TEAM CANADA，那么会发生什么情况，那就是“团队列表”中只能选择TEAM CANADA，而所有其他选项都将被删除。

<div class="form-content">
    <span class="survey-question-number-container">
        <span class="field-required"></span>
        <span class="field-number survey-question-number">
            5.
        </span>
    </span>
    <span class="input-container">
        <label for="1684_53515_8_169135">
            <span class="aural-only">Field Is Required</span>
            <span class="input-label">Select Team</span>
        </label>
        <span class="ungrouped">
            <select name="1684_53515_8_169135" id="1684_53515_8_169135" onchange="choiceSelected('1684_53515_8_169135', this.selectedIndex);">
                <option value="NOREPLY"></option>
                <option value="TEAM CANADA">TEAM CANADA</option>
            </select>
        </span>
    </span>
</div>

儿童活动：

<div class="form-content">
    <span class="survey-question-number-container">
        <span class="field-required"></span>
        <span class="field-number survey-question-number">
            4.
        </span>
    </span>
    <span class="input-container">
        <label for="1684_55117_7_170272">
            <span class="aural-only">Field Is Required</span>
            <span class="input-label">Select Division</span>
        </label>
        <span class="ungrouped">
            <select name="1684_55117_7_170272" id="1684_55117_7_170272" onchange="choiceSelected('1684_55117_7_170272', this.selectedIndex);">
                <option value="NOREPLY">Please select response</option>
                <option value="NORTH">NORTH</option>
                <option value="EAST">EAST</option>
                <option value="WEST">WEST</option>
                <option value="SOUTH">SOUTH</option>
                <option value="TEAM CANADA">TEAM CANADA</option>
            </select>
        </span>
    </span>
</div>

请注意，id的位置已更改，因此，当您选择TEAM CANADA时，您应该在此列表中仅包含TEAM CANADA，但它不起作用。它显示了完整列表（在该问题的末尾）。

<div class="form-content">
    <span class="survey-question-number-container">
        <span class="field-required"></span>
        <span class="field-number survey-question-number">
            5.
        </span>
    </span>
    <span class="input-container">
        <label for="1684_55117_8_170273">
            <span class="aural-only">Field Is Required</span>
            <span class="input-label">Select Team</span>
        </label>
        <span class="ungrouped">
            <select name="1684_55117_8_170273" id="1684_55117_8_170273" onchange="choiceSelected('1684_55117_8_170273', this.selectedIndex);">
                <option value="NOREPLY"></option>
                <option value="TEAM CANADA">TEAM CANADA</option>
            </select>
        </span>
    </span>
</div>

这是根据“部门”下拉列表中的选择而更改的选项的完整列表：

        <option value="NOREPLY"></option>
    <option value="FRIENDS AND FAMILY">FRIENDS AND FAMILY</option>
    <option value="THE RETIREES">THE RETIREES</option>
    <option value="ADMINISTRATION &amp; ADMINISTERED">ADMINISTRATION &amp; ADMINISTERED</option>
    <option value="ADMINISTRATION - OTHER">ADMINISTRATION - OTHER</option>
    <option value="CORPORATE DEVELOPMENT GROUP">CORPORATE DEVELOPMENT GROUP</option>
    <option value="CORPORATE SECRETARY">CORPORATE SECRETARY</option>
    <option value="GLOBAL REG AFF &amp; RISK CONTROLS">GLOBAL REG AFF &amp; RISK CONTROLS</option>
    <option value="INFRASTRUCTURE-OTHER">INFRASTRUCTURE-OTHER</option>
    <option value="INTERNAL AUDIT">INTERNAL AUDIT</option>
    <option value="LEGAL">LEGAL</option>
    <option value="TOTAL ADMINISTERED">TOTAL ADMINISTERED</option>
    <option value="CAPITAL MARKETS">CAPITAL MARKETS</option>
    <option value="CAO">CAO</option>
    <option value="CORPORATE BANKING">CORPORATE BANKING</option>
    <option value="ECONOMICS">ECONOMICS</option>
    <option value="GLOBAL INVESTMENT BANKING">GLOBAL INVESTMENT BANKING</option>
    <option value="GLOBAL MARKETS">GLOBAL MARKETS</option>
    <option value="LEADERSHIP">LEADERSHIP</option>
    <option value="OTHER">OTHER</option>
    <option value="CLIENT CONNECTIVITY AND INNOVATION"></option>
    <option value="CC&amp;I OTHER">CC&amp;I OTHER</option>
    <option value="CLIENT ACCOUNT MANAGEMENT">CLIENT ACCOUNT MANAGEMENT</option>
    <option value="CLIENT CONTACT CENTRES">CLIENT CONTACT CENTRES</option>
    <option value="CLIENT EXPERIENCE">CLIENT EXPERIENCE</option>
    <option value="CONTACT CENTRES, CENTRES OF EXPERTISE">CONTACT CENTRES, CENTRES OF EXPERTISE</option>
    <option value="DIRECT BANKING, INNOVATION AND ANALYTICS">DIRECT BANKING, INNOVATION AND ANALYTICS</option>
    <option value="ENTERPRISE PROCESS MANAGEMENT">ENTERPRISE PROCESS MANAGEMENT</option>
    <option value="RETAIL TRANSACTION FRAUD">RETAIL TRANSACTION FRAUD</option>
    <option value="COMMERCIAL BANKING AND WEALTH MANAGEMENT">COMMERCIAL BANKING AND WEALTH MANAGEMENT</option>
    <option value="BUSINESS EFFECTIVENESS AND CLIENT SERVICES">BUSINESS EFFECTIVENESS AND CLIENT SERVICES</option>
    <option value="ASSET MANAGEMENT">ASSET MANAGEMENT</option>
    <option value="TEAM CANADA">TEAM CANADA</option>
    <option value="ENGINEERING">ENGINEERING</option>
    <option value="COMMERCIAL BANKING">COMMERCIAL BANKING</option>
    <option value="COMMERCIAL PRODUCTS, FINANCIAL PLANNING AND ADVICE, ADVISOR SERVICES">COMMERCIAL PRODUCTS, FINANCIAL PLANNING AND ADVICE, ADVISOR SERVICES</option>
    <option value="OTHER">OTHER</option>
    <option value="PRIVATE WEALTH MANAGEMENT">PRIVATE WEALTH MANAGEMENT</option>
    <option value="WEALTH MANAGEMENT HEAD OFFICE">WEALTH MANAGEMENT HEAD OFFICE</option>
    <option value="HUMAN RESOURCES AND COMMUNICATIONS">HUMAN RESOURCES AND COMMUNICATIONS</option>
    <option value="COMMUNICATIONS &amp; PUBLIC AFFAIRS">COMMUNICATIONS &amp; PUBLIC AFFAIRS</option>
    <option value="HUMAN RESOURCES">HUMAN RESOURCES</option>
    <option value="PURPOSE, BRAND AND MARKETING">PURPOSE, BRAND AND MARKETING</option>
    <option value="PERSONAL AND SMALL BUSINESS BANKING, CANADA">PERSONAL AND SMALL BUSINESS BANKING, CANADA</option>
    <option value="BANKING CENTRES">BANKING CENTRES</option>
    <option value="BUSINESS BANKING">BUSINESS BANKING</option>
    <option value="DIRECT INVESTING AND ADVICE">DIRECT INVESTING AND ADVICE</option>
    <option value="MOBILE ADVICE">MOBILE ADVICE</option>
    <option value="DELIVERY AND OPERATIONAL EFFECTIVENESS">DELIVERY AND OPERATIONAL EFFECTIVENESS</option>
    <option value="PERSONAL BANKING PRODUCTS">PERSONAL BANKING PRODUCTS</option>
    <option value="PROJECTS">PROJECTS</option>
    <option value="SEVP DIRECTS">SEVP DIRECTS</option>
    <option value="STRATEGY AND TRANSFORMATION">STRATEGY AND TRANSFORMATION</option>
    <option value="TECHNOLOGY &amp; OPERATIONS">TECHNOLOGY &amp; OPERATIONS</option>
    <option value="APPLICATION DELIVERY PROJECTS">APPLICATION DELIVERY PROJECTS</option>
    <option value="CAPITAL MARKETS/WEALTH MGMT OP">CAPITAL MARKETS/WEALTH MGMT OP</option>
    <option value="CORPORATE SERVICES">CORPORATE SERVICES</option>
    <option value="ENTERPRISE PAYMENTS">ENTERPRISE PAYMENTS</option>
    <option value="ENTERPRISE PRGMS &amp; DELIVERY EX">ENTERPRISE PRGMS &amp; DELIVERY EX</option>
    <option value="ENTERPRISE SECURITY &amp; RISK SER">ENTERPRISE SECURITY &amp; RISK SER</option>
    <option value="OTHER">OTHER</option>
    <option value="RETAIL OPERATIONS &amp; INTRIA">RETAIL OPERATIONS &amp; INTRIA</option>
    <option value="RO&amp;I PROJECTS &amp; BASE OPERATION">RO&amp;I PROJECTS &amp; BASE OPERATION</option>
    <option value="T&amp;O DIRECTS">T&amp;O DIRECTS</option>
    <option value="TECHNOLOGY">TECHNOLOGY</option>
    <option value="TOTAL FINANCE">TOTAL FINANCE</option>
    <option value="CFO GROUP">CFO GROUP</option>
    <option value="FINANCE SHARED SERVICES">FINANCE SHARED SERVICES</option>
    <option value="OTHER">OTHER</option>
    <option value="TAXATION">TAXATION</option>
    <option value="TREASURY">TREASURY</option>
    <option value="TOTAL RISK MANAGEMENT">TOTAL RISK MANAGEMENT</option>
    <option value="ANTI-MONEY LAUNDERING">ANTI-MONEY LAUNDERING</option>
    <option value="CAPITAL MARKETS">CAPITAL MARKETS</option>
    <option value="GLOBAL COMPLIANCE GROUP">GLOBAL COMPLIANCE GROUP</option>
    <option value="GLOBAL CREDIT RISK MANAGEMENT">GLOBAL CREDIT RISK MANAGEMENT</option>
    <option value="GLOBAL OPERATIONAL RM">GLOBAL OPERATIONAL RM</option>
    <option value="RISK ANALYTICS, REPORTING AND CREDIT DECISIONING">RISK ANALYTICS, REPORTING AND CREDIT DECISIONING</option>
    <option value="RISK MANAGEMENT - OTHER">RISK MANAGEMENT - OTHER</option>

那么有没有办法使该动态地工作，所以我不必为58个id做一个if语句？

谢谢您的帮助！

Answer 1

我知道了。

找到了jQuery [attribute * = value]选择器。用它来找到id中的公用号码，这样

ex

            if (selectedValue == "TEAM CANADA") {
                $("select[name*='_8_'] > option").each(function() {
                    if($(this).val().toUpperCase() != "TEAM CANADA") {
                        $(this).remove();
                    }
                });
            }

如何在使用jQuery动态更改选项ID的选择中定位选项

1 个答案: