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

Question

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

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

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

我试图定位一个由系统分配但每个复制事件都不同的<option></option>元素。idid

  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"（到目前为止......这似乎工作，尽管复制和id改变，我不知道为什么。

不起作用的是，如果在id="1684_53515_7_169134"您选择 TEAM CANADA 中，下一个问题id="1684_53515_8_169135"应该去掉所有选项，并且只有 TEAM CANADA 作为选项。

我知道让 TEAM CANADA 在那里两次没有意义，但这是必需的。

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

前任：

蓝图：

<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，您将获得以下列表，其中包含 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="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 在 Team List 中是可选的，而所有其他选项都将被删除。

<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 做一个 if 语句id？

谢谢您的帮助！

score 0 · Accepted Answer

我想到了。

找到 jQuery [attribute*=value] 选择器。用它来找到ids 中的公共数字所以

前任

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

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

1 回答 1

Related

Reference