使用jQuery過濾後續下拉列表

Question

您好，非常感謝您的閱讀。我有3個下拉菜單，1個過濾器，2個提交值。我需要做的是讓第一個下拉菜單過濾第三個值，以便唯一顯示的值是與第一個值相匹配的值。我試圖根據他們的班級篩選他們，但遇到了麻煩。通過ID過濾會更容易嗎？

這裏是有問題的形式：

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

這裏是jQuery的，我已經使用過。有了它，我成功地通過它的值過濾了第三個列表，但是在遇到一些POST問題後，我不得不更改這些值並被卡住了。

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

Answer 1

您正在檢查的值，而不是如果該選項有類。您希望您的if語句爲：

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

您正在檢查每個選項的值以查看它是否與該類匹配。當然它沒有，這就是爲什麼你沒有過濾任何東西。

你可以看到它在這裏工作：也http://jsfiddle.net/UqaqS/1/

，你真的不需要有兩句話在你的篩選下拉的價值，你可以用僅僅有All，Database，Web寧可獲得通過Web Tier等。您可以按照第一個單詞進行過濾。你只是爲所有看起來沒有關係的選項添加第二類。