Блог

Главная - Вопросы по программированию - как я могу сопоставить данные из двух выпадающих списков

как я могу сопоставить данные из двух выпадающих списков

#php #jquery #sql

#php #jquery #sql

Вопрос:

у меня есть два выпадающих списка из базы данных. теперь я хочу, чтобы при выборе первого выпадающего списка он фильтровал данные из второго выпадающего списка, как я могу это сделать?

Комментарии:

1. Его среднее значение дает мне результат с тем же идентификатором

2. Пожалуйста, найдите в Google несколько руководств.

3. если у вас есть 2 массива, которые вы можете использовать array_diff , чтобы получить разницу.

4. Покажите свой код.

5. Пожалуйста, покажите нам свой код, чтобы мы могли помочь ему больше, я думаю, вам следует использовать идентификатор (не имя) первого выбранного выпадающего значения, и тогда вы получите правильные данные

Ответ №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>