用jQuery过滤后续的下拉菜单 [英] Filtering subsequent dropdowns with jQuery

查看：117
本文介绍了用jQuery过滤后续的下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好，谢谢你的阅读。我有3个下拉菜单，1个过滤器，2个提交值。我需要做的是让第一个下拉菜单过滤第三个值，以便唯一显示的值是与第一个值相匹配的值。我试图根据他们的班级筛选他们，但遇到了麻烦。按ID过滤会更容易吗？



以下是有问题的表单： 

 < form class =form-horizo​​ntal wellmethod =postaction =/ cgi-bin / dropdown.py> 
< fieldset> 
<图例>选择审核点< /图例> 
 
< div class =control-group> 
< label class =control-labelfor =select01>选择层级< / label> 
< div class =controls> 
< select id =select01name =select01> 
< option value =所有层级>所有层级< / option> 
< option value =数据库层>数据库层< / 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-labelfor =select01>选择版本< / label> 
< div class =controls> 
< select id =select02name =select02> 
< option value =Oraclename =Oracle> Oracle< / option> 
< option value =SQLname =SQL> SQL< / option> 
< option value =Bothname =Both>两者< / option> 
< / select> 
< / div> 
< / div> 
 
< div class =control-group> 
< label class =control-labelfor =select01>选择审核点< / label> 
< div class =controls> 
< select id =select03name =select03> 
< option class =All Tiersvalue =Eagle Software Version> Eagle Software Version< / option> 
< option class =All Tiersvalue =服务器操作系统，内存，CPU>服务器操作系统，内存，CPU< /选项> 
< option class =All Tiersvalue =高可用性>高可用性< / option> 
< option class =Database Tiervalue =DBMS Version> DBMS Version< / option> 
< option class =Database Tiervalue =DBMS Statistics> DBMS Statistics< / option> 
< option class =Database Tiervalue =DBMS Parameters> DBMS参数< / option> 
< option class =Database Tiervalue =DBMS Data File Growth> DBMS Data File Growth< / option> 
< option class =Database Tiervalue =数据库磁盘结构>数据库磁盘结构< / option> 
< option class =Database Tiervalue =长时间运行SQL>长时间运行SQL< / option> 
< option class =Database Tiervalue =安全数据增长范围>安全数据增长范围< / option> 
< option class =Database Tiervalue =系统表中的多余条目>系统表中的多余条目< / option> 
< option class =Database Tiervalue =Feed Error Orphans> Feed Error Orphans< / option> 
< option class =Database Tiervalue =Position Detail Orphans> Position Detail Orphans< / option> 
< option class =Database Tiervalue =数据保留策略>数据保留策略< / option>

这里是我以前使用过的jQuery。有了它，我成功地通过它的值过滤了第三个列表，但在遇到一些POST问题后，我不得不更改这些值并被卡住了。

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 var savedOptions =''; 
 
 savedOptions = $（'＃select03'）。html（） （）; //保存第二个下拉列表
 
 $（'＃select01'）。 //更改第一个下拉列表的值后，将此值存储在变量
 
 $（'＃select03'）。html（savedOptions）; //将第二个下拉列表的内容
 $（'＃select03'）。children（'option'）。each（function（）{
 if（$（this）.attr（'value'）！= selectedValue）{
 $（ this）.remove（）; //比较并逐步通过第二个下拉列表并删除所有不需要的选项
} 
}）; 
}）; 
}）; 
< / script>


解决方案

班上。您希望您的if语句为： 

  if（！$（this）.hasClass（s​​electedValue））{

您正在检查每个选项的值以查看它是否与该类匹配。当然，它并没有，这就是为什么你没有过滤任何东西。



你可以看到它在这里工作： http://jsfiddle.net/UqaqS/1/

另外，您需要在过滤下拉列表中输入两个单词，您可以通过 All ， Database ， Web 而不是 Web Tier 等。您可以按照第一个单词进行过滤。您只需向所有看起来并不重要的选项添加第二个类。


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>

解决方案

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.

这篇关于用jQuery过滤后续的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆