javascript - 用jquery修改后续下拉列表

Question

我有一个包含多个下拉列表的网络表单。我只想在第二个列表中显示与第一个列表中的选择具有相同值的选项。

<!-- Dropdown #1 -->

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


<!-- Dropdown #2 -->

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

我需要能够连续更改列表 1 的选择，所以我不能 .remove() 在第二个列表中不匹配的选项。如果我确实删除了它们，那么我将需要在第一个列表中的每个新选择上重新填充第二个列表。

感谢您的帮助。

Answer 1

我已经用您的 HTML 代码进行了测试并且工作正常...您只需要修改此代码，以便在加载页面时会有过滤选择。

jQuery(document).ready(function() {
    var savedOptions = '';

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

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

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