Filtering subsequent dropdowns with jQuery

2019-08-26 09:21发布

问题:

Hello and thank you for reading. I have 3 dropdown menus, 1 to filter, and 2 to submit values. What I need to do is have the 1st dropdown menu filter the values of the 3rd so that the only values being displayed are those that match the value from the 1st. I have tried to filter them based on their class but am having trouble. Would it be easier to filter by ID?

Here is the form in question:

<form class="form-horizontal well" method="post" action="/cgi-bin/dropdown.py">
    <fieldset>
      <legend>Select Audit Point</legend>

      <div class="control-group">
        <label class="control-label" for="select01">Select Tier</label>
        <div class="controls">
          <select id="select01" name="select01">
            <option value="All Tiers">All Tiers</option>
            <option value="Database Tier">Database Tier</option>
            <option value="Application Tier">Application Tier</option>
            <option value="Web Tier">Web Tier</option>
          </select>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="select01">Select Version</label>
        <div class="controls">
          <select id="select02" name="select02">
            <option value="Oracle" name="Oracle">Oracle</option>
            <option value="SQL" name="SQL">SQL</option>
            <option value="Both" name="Both">Both</option>
          </select>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="select01">Select Audit Point</label>
        <div class="controls">
          <select id="select03" name="select03">
            <option class="All Tiers" value="Eagle Software Version">Eagle Software Version</option>
            <option class="All Tiers" value="Server OS, Memory, CPU">Server OS, Memory, CPU</option>
            <option class="All Tiers" value="High Availability">High Availability</option>
            <option class="Database Tier" value="DBMS Version">DBMS Version</option>
            <option class="Database Tier" value="DBMS Statistics">DBMS Statistics</option>
            <option class="Database Tier" value="DBMS Parameters">DBMS Parameters</option>
            <option class="Database Tier" value="DBMS Data File Growth">DBMS Data File Growth</option>
            <option class="Database Tier" value="Database Disk Structure">Database Disk Structure</option>
            <option class="Database Tier" value="Long Running SQL">Long Running SQL</option>
            <option class="Database Tier" value="Security Data Growth Range">Security Data Growth Range</option>
            <option class="Database Tier" value="Extraneous entries in System Tables">Extraneous entries in System Tables</option>
            <option class="Database Tier" value="Feed Error Orphans">Feed Error Orphans</option>
            <option class="Database Tier" value="Position Detail Orphans">Position Detail Orphans</option>
            <option class="Database Tier" value="Data Retention Policy">Data Retention Policy</option>
            <option class="Database Tier" value="Securities Added Daily">Securities Added Daily</option>
            <option class="Database Tier" value="Security Master Load">Security Master Load</option>
            <option class="Database Tier" value="SRM Purge">SRM Purge</option>
            <option class="Database Tier" value="Best Pricing Purge">Best Pricing Purge</option>
            <option class="Database Tier" value="Partitioning">Partitioning</option>
            <option class="Database Tier" value="DBMS Data/Log File Utilize Shared Disk">DBMS Data/Log File Utilize Shared Disk</option>
            <option class="Database Tier" value="DBMS Failover">DBMS Failover</option>
            <option class="Application Tier" value="DBMS Client Version">DBMS Client Version</option>
            <option class="Application Tier" value="Star Engine IP Configuration">Star Engine IP Configuration</option>
            <option class="Application Tier" value="Engine Count/Configuration">Engine Count/Configuration</option>
            <option class="Application Tier" value="STAR Engine Logging Interval">STAR Engine Logging Interval</option>
            <option class="Application Tier" value="PACE Engine Port Configuration">PACE Engine Port Configuration</option>
            <option class="Application Tier" value="PACE Server Logging">PACE Server Logging</option>
            <option class="Application Tier" value="PACE Engine Log Configuration">PACE Engine Log Configuration</option>
            <option class="Application Tier" value="STAR Engine Load Balancer Interval">STAR Engine Load Balancer Interval</option>
            <option class="Application Tier" value="Engines Restarted Weekly">Engines Restarted Weekly</option>
            <option class="Application Tier" value="Designated Master">Designated Master</option>
            <option class="Application Tier" value="Cluster Managers Identical">Cluster Managers Identical</option>
            <option class="Application Tier" value="Uploader Shared Disk Space">Uploader Shared Disk Space</option>
            <option class="Application Tier" value="Custom Archive Rule Shared Disk Space">Custom Archive Rule Shared Disk Space</option>
            <option class="Application Tier" value="App Server Clustering">App Server Clustering</option>
            <option class="Application Tier" value="PACE Event Concurrency">PACE Event Concurrency</option>
            <option class="Application Tier" value="Homogenous Engine Configuration">Homogenous Engine Configuration</option>
            <option class="Web Tier" value="Log Levels">Log Levels</option>
            <option class="Web Tier" value="Scheduler Purging">Scheduler Purging</option>
            <option class="Web Tier" value="Web Server Services Restarted Weekly">Web Server Services Restarted Weekly</option>
            <option class="Web Tier" value="Email Notification Basic Configuration">Email Notification Basic Configuration</option>
            <option class="Web Tier" value="Eagle Web Load Balancer Configuration"n>Eagle Web Load Balancer Configuration</option>
            <option class="Web Tier" value="Load Balancer Customizations">Load Balancer Customizations</option>
            <option class="Web Tier" value="Portal Shared Disk Space">Portal Shared Disk Space</option>
            <option class="Web Tier" value="Message Center Shared Disk Space">Message Center Shared Disk Space</option>
            <option class="Web Tier" value="Message Center ID'S">Message Center ID'S</option>
            <option class="Web Tier" value="Schedule Service Config">Schedule Service Config</option>
            <option class="Web Tier" value="ePace is a client of Clustered App Servers">ePace is a client of Clustered App Servers</option>
            <option class="Web Tier" value="Portal is a client of Clustered App Servers">Portal is a client of Clustered App Servers</option>
            <option class="Web Tier" value="ESTAR is a client of Clustered Load Balancers">ESTAR is a client of Clustered Load Balancers</option>
            <option class="Web Tier" value="ESTAR is a client of Clustered Engines">ESTAR is a client of Clustered Engines</option>
            <option class="Web Tier" value="ESTAR is a client of Clustered Report Export Services">ESTAR is a client of Clustered Report Export Services</option>
            <option class="Web Tier" value="WebSync Configured">WebSync Configured</option>
            <option class="Web Tier" value="Web Server Load Balancing Configured">Web Server Load Balancing Configured</option>
            <option class="Web Tier" value="Shared Disk Dynamic Folder">Shared Disk Dynamic Folder</option>

          </select>
        </div>
      </div>


      <div class="form-actions">
        <button type="submit" class="btn btn-primary" value="Submit">Submit</button>
        <button type="reset" class="btn">Cancel</button>
      </div>
    </fieldset>
  </form>

And here is the jQuery that I had used before. With it, I successfully filtered the 3rd list by its values, but after running into some POST issues, I had to change the values and am stuck.

   <script type="text/javascript">
   $(document).ready(function() {

        var savedOptions = '';

        savedOptions = $('#select03').html(); //save the second dropdown-list

        $('#select01').change(function() {
            var selectedValue = $('#select01').val(); //After changing the value of the first dropdown, store this value inside a variable

           $('#select03').html(savedOptions); //restore the content of the 2nd dropdown
            $('#select03').children('option').each(function() {
                if($(this).attr('value') != selectedValue) {
                    $(this).remove(); //Compare and step through the 2nd dropdown and delete all unneccessary options
                }
            });
        });
    });
    </script>

回答1:

You are checking the value rather than if the option has the class. You want your if statement to be:

if(!$(this).hasClass(selectedValue)) {

You were checking each option's value to see if it matched the class. Which of course it didn't and that is why you were not filtering anything.

You can see it working here: http://jsfiddle.net/UqaqS/1/

Also, you really don't need to have two words in the value of your filtering dropdown, you could get by with just having All, Database, Web rather that Web Tier, etc. You could just filter by the first word. You are just adding a second class to all the options which doesn't seem to really matter.