Фильтрация последующих выпадающих списков с помощью jQuery

Здравствуйте, спасибо вам за чтение. У меня есть 3 раскрывающихся меню, 1 для фильтрации и 2 для отправки значений. Мне нужно сделать, чтобы в первом раскрывающемся меню были выбраны значения 3-го так, чтобы отображались только отображаемые значения, которые соответствуют значению от 1-го. Я попытался отфильтровать их на основе их класса, но у меня проблемы. Было бы легче фильтровать по ID?Фильтрация последующих выпадающих списков с помощью jQuery

Вот форма вопроса:

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

источник

2013-07-22 Jake

Можете ли вы создать jsFiddle, который показывает код Javascript, который вы пытаетесь использовать tp? – DevlshOne

Можете ли вы написать код jQuery здесь? –

Являются ли эти выпадающие базы данных управляемыми или фиксированными значениями? – Learner

Вы проверяете значение, а не если этот параметр имеет класс. Вы хотите, чтобы ваша заявка была:

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

Вы проверяли значение каждой опции, чтобы узнать, соответствует ли он классу. Который, конечно, этого не сделал, и именно поэтому вы ничего не фильтровали.

Вы можете увидеть здесь работать: http://jsfiddle.net/UqaqS/1/

Кроме того, вы действительно не должны иметь два слова в значении вашей фильтрации выпадающего списка, вы могли бы получить, имея только All, Database, Web скорее, Web Tier и т. Д. Вы можете просто фильтровать по первому слову. Вы просто добавляете второй класс ко всем параметрам, которые, похоже, не имеют большого значения.

источник

2013-07-22 15:31:53 Schleis

Спасибо за ввод. Я вижу, что это работает, однако он удаляет непревзойденные значения. Если пользователь выбирает параметр из первого выпадающего списка и решает его изменить, необходимые значения были удалены. Можем ли мы скрыть их? – Jake

Хотя это удаляло значения из jsfiddle, он работал правильно на моем сервере. Большое спасибо за помощь! – Jake

У меня есть еще один вопрос. Когда форма изначально загружается, выпадающее меню № 3 полностью заполняется, а значение выпадающего списка # 1 означает, что # 3 следует отфильтровать. Только когда # 1 изменено, изменяется # 3. Есть ли способ фильтровать # 3 на загрузке страницы? – Jake

Фильтрация последующих выпадающих списков с помощью jQuery

ответ

Смежные вопросы