1

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

<!-- 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() 在第二个列表中不匹配的选项。如果我确实删除了它们，那么我需要在第一个列表中的每个新选择上重新填充第二个列表。

谢谢您的帮助。

4

4 回答 4

1

选择元素内不能有重复的选项值。

最好有一个单独的元素来保存选项标签。然后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();

工作小提琴

于 2013-06-25T17:41:41.043 回答
1

您可以像这样禁用选项：

$("#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我想您也可以完全删除这些选项，但是，这将涉及每次更改初始下拉列表时重新构建。

于 2013-06-25T17:46:22.473 回答
1

创建一个字符串数组的“映射”并根据需要从中填充。

// 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
  ...
}
于 2013-06-25T17:50:00.007 回答
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
            }
        });
    });
});
于 2013-06-25T17:53:32.523 回答