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

Question

我有两个来自数据库的下拉列表。如果我选​​择第一个下拉列表，我想要从第二个下拉列表中过滤数据，我该怎么办？

Answer 1

您可以使用多级依赖下拉插件使用jQuery - 相关下拉列表：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>