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

Question

Using a CMS, I have created an event page, we can call it the Blueprint as it will be replicated to create child events, and any changes I make in the Blueprint can be pushed down to all child events.

In my Blueprint, I have a survey where a drop down question asks the user to select their division.

Based on which division is selected, the next question filters the list of regions available to that division.

I'm trying to target an <option></option> element where the id is assigned by the system but the id is different for each replicated event.

  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());});
  }

What is intended to happen is

if user selects North (if they're on the English) or Nord (if on French) in the id="1684_53515_7_169134" the next question's filtered drop down ( id="1684_53515_8_169135" ) includes TEAM CANADA to the list. So far...this seems to work, despite replication and id changing and I'm not sure why.

What isn't working is if in id="1684_53515_7_169134" you select TEAM CANADA the next question id="1684_53515_8_169135" should strip all options and only have TEAM CANADA as an option.

I know it doesn't make sense to have TEAM CANADA there twice but its required.

Some additional info, all event pages share a page-wrapper but the event pages are separate from each other. The registration flow (where this survey appears) is also separate between event pages. So why the system generates a new id number per event for the same fields across each event I don't know.

ex:

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>

and then when you select an option, for example, NORTH you get the following list, with 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>

If you were to select TEAM CANADA in the division, what happens is only TEAM CANADA is selectable in the Team List, and all other options get removed.

<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>

CHILD EVENT:

<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>

notice the id 's have changed, so now when you select TEAM CANADA you SHOULD ONLY have TEAM CANADA in this list but it doesn't work. It shows the full list (at the end of this question).

<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>

This is the full list of options that change based on what is selected in the Division dropdown:

        <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>

So is there a way to make this work dynamically so I don't have to do an if statement for 58 id 's?

Thank you for your help!

Answer 1

I figured it out.

Found the jQuery [attribute*=value] Selector. use that to find the common number in the id s so

ex

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