我如何匹配两个下拉列表中的数据

Question

我有两个来自数据库的下拉列表。现在我想做当我选择第一个下拉列表时它会过滤第二个下拉列表中的数据我该怎么做？

Answer 1

您可以使用带有 jQ​​uery 的多级依赖下拉插件来做到这一点 - 依赖下拉列表：http://www.jqueryscript.net/form/Multilevel-Dependent-Dropdown-Plugin-With-jQuery-Dependent-Dropdowns.html

基本用法：

/*
 * Copyright Shorif Ali (http://github.com/shorifali/)
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 *
 */

'use strict';

$(document).ready(function() {

    $.extend($, {
        option: '<option value="0" selected="selected">Select Option</option>'
    });

    // Method to clear dropdowns down to a given level
    $.extend($, {
        clearDropDown: function(arrayObj, startIndex) {
            $.each(arrayObj, function(index, value) {
                if(index >= startIndex) {
                    $(value).html($.option);
                }
            });
        }
    });

    // Method to disable dropdowns down to a given level
    $.extend($, {
        disableDropDown: function(arrayObj, startIndex) {
            $.each(arrayObj, function(index, value) {
                if(index >= startIndex) {
                    $(value).attr('disabled', 'disabled');
                }
            });
        }
    });

    // Method to disable dropdowns down to a given level
    $.extend($, {
        enableDropDown: function(that) {
            that.removeAttr('disabled');
        }
    });

    // Method to generate and append options
    $.extend($, {
        generateOptions: function(element, selection, limit) {
            var options = '';
            for(var i = 1; i <= limit; i++) {
                options += '<option value="' + i + '">Option ' + selection + '-' + i + '</option>';
            }
            element.append(options);
        }
    });

    // Select each of the dropdowns
    var firstDropDown = $('#first');
    var secondDropDown = $('#second');
    var thirdDropDown = $('#third');

    // Hold selected option
    var firstSelection = '';
    var secondSelection = '';
    var thirdSelection = '';

    // Hold selection
    var selection = '';

    // Selection handler for first level dropdown
    firstDropDown.on('change', function() {

        // Get selected option
        firstSelection = firstDropDown.val();

        // Clear all dropdowns down to the hierarchy
        $.clearDropDown($('select'), 1);

        // Disable all dropdowns down to the hierarchy
        $.disableDropDown($('select'), 1);

        // Check current selection
        if(firstSelection === '0') {
            return;
        }

        // Enable second level DropDown
        $.enableDropDown(secondDropDown);

        // Generate and append options
        selection = firstSelection;
        $.generateOptions(secondDropDown, selection, 4);
    });

    // Selection handler for second level dropdown
    secondDropDown.on('change', function() {
        secondSelection = secondDropDown.val();

        // Clear all dropdowns down to the hierarchy
        $.clearDropDown($('select'), 2);

        // Disable all dropdowns down to the hierarchy
        $.disableDropDown($('select'), 2);

        // Check current selection
        if(secondSelection === '0') {
             return;
        }

        // Enable third level DropDown
        $.enableDropDown(thirdDropDown);

        // Generate and append options
        selection = firstSelection + '-' + secondSelection;
        $.generateOptions(thirdDropDown, selection, 4);
    });

    // Selection handler for third level dropdown
    thirdDropDown.on('change', function() {
        thirdSelection = thirdDropDown.val();

        // Final work goes here

     });

    /*
     * In this way we can make any number of dependent dropdowns
     *
     */

});

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>


<div class="row">
            
                <div class="col-lg-6 col-lg-offset-3">
                    <div class="form-group">
                        <label for="first">First Level Dropdown</label>
                        <select id="first" class="form-control" role="listbox">
                            <option value="0" selected="selected">Select Option</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                            <option value="4">Option 4</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="second">Second Level Dropdown</label>
                        <select id="second" class="form-control" role="listbox"><option value="0" selected="selected">Select Option</option><option value="1">Option 1-1</option><option value="2">Option 1-2</option><option value="3">Option 1-3</option><option value="4">Option 1-4</option></select>
                    </div>
                    <div class="form-group">
                        <label for="third">Third Level Dropdown</label>
                        <select id="third" class="form-control" role="listbox"><option value="0" selected="selected">Select Option</option><option value="1">Option 1-2-1</option><option value="2">Option 1-2-2</option><option value="3">Option 1-2-3</option><option value="4">Option 1-2-4</option></select>
                    </div>
                </div>
            </div>