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

您在select 元素中不能包含重复的选项值。

最好有一个包含options标签的单独元素。然后将value替换为data-value属性。

试试这个

$('#select01').on('change', function() {

    var $select03 = $('#select03'),
        currValue = this.value;

    $select03.empty();

    var $options = $('.template option').filter(function() {
          return $(this).data('value') === currValue  
    }).get();

    $select03.append($options);
}).change();

<强> Working Fiddle

Answer 2

您可以禁用以下选项：

$("#select01").change(function() {
    //Get value from the selected option
    var filter = this.value;

    //Loop thru second select options
    $("#select02 option").each(function() {
        //Enable the option (used for if the select changes values)
        $(this).prop("disabled", false);

        //Compare second select values to the initial selected value
        if (this.value != filter) {

            //Disable options that do not match
            $(this).prop("disabled", true);
        }
    });
});

演示：http://jsfiddle.net/QXhRy/

我想您也可以完全删除这些选项，但是，这会涉及每次更改初始下拉列表时重新构建select。

Answer 3

创建String数组的“map”，并根据需要从中填充。

// initialize options on page load
var options = new Array();
options["all"] = new Array("A","B","C");
options["db"] = new Array("D","E","F");

function changeSecondDropDown(selectedValue)
{
  // clear options from second drop down list
  ...

  var optionsToAdd = options[selectedValue]
  // loop through options and add them to second drop down list
  ...
}

Answer 4

我已经使用您的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
            }
        });
    });
});

使用jquery修改后续下拉列表

4 个答案: