Home>

The solution is to allow you to narrow down the select boxes using the two chosen libraries.
Currently, I have implemented one select box that uses the chosen.js library.
If i use the same content more than once, the cause that both will not work cannot be solved.
Since the id and name of the second select box are different, I thought that one would start, but neither started.
If anyone knows, please let me know.

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><title>Document</title><!-Bootstrap CSS-><link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><!-Font Awesome 5--><link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css"><link rel = "stylesheet" href = "../ css/stylesheet.css"><link rel = "stylesheet" href = "../ css/chosen-css.css"></head><body>                                                                                 <i></i>Please select a person in charge                       <form action = "">                                                                                            <select>                                    <option value = "">Department selection</option>                                    <option value = "itsol">IT Solution Department</option>                                    <option value = "jigyou">Business Administration Department</option>                                    <option value = "eigyou">Sales Group</option>                                </select>                                                                                                <select name = "visitor_id">                                    <option value = "">Name selection</option>                                    <option data-visitor_id = "itsol">Yamada (Yamada)</option>                                    <option data-visitor_id = "itsol">Tanaka</option>                                    <option data-visitor_id = "jigyou">Sato</option>                                    <option data-visitor_id = "jigyou">Suzuki</option>                                    <option data-visitor_id = "eigyou">Nakata</​​option></select>                                                                                                                                                        <select>                                    <option value = "">Department selection</option>                                    <option value = "itsol">IT Solution Department</option>                                    <option value = "jigyou">Business Administration Department</option>                                    <option value = "eigyou">Sales Group</option>                                </select>                                                                                                <select name = "exiter_id">                                    <option value = "">Name selection</option>                                    <option data-exiter_id = "itsol">Yamada (Yamada)</option>                                    <option data-exiter_id = "itsol">Tanaka</option>                                    <option data-exiter_id = "jigyou">Sato</option>                                    <option data-exiter_id = "jigyou">Suzuki</option>                                    <option data-exiter_id = "eigyou">Nakata</​​option>                                </select>                                                          
                                                          <button type = "button" data-toggle = "modal"
                                    data-target = "# tabModal">Completed
                              </button>                            <!-Modal->                                                                                                                                                                                                       Person in charge confirmation screen                                               <button type = "button" data-dismiss = "modal"
                                                    aria-label = "Close">                                                <span aria-hidden = "true">&times;</span>                                            </button>                                                                                                                                    <p>Are you in charge of this?</p>                                              mail address:
                                               Person in charge:
                                                                                                                                                                                       Cancel                                               <button type = "submit">OK</button>                                                                                                                                                                                  
                      </form>                                                      
      <!-Optional JavaScript-><!-JQuery first, then Popper.js, then Bootstrap JS-><script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script><link href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel = "stylesheet"><script src = "../ js/stylesheet.js"></script></body></html>
// chosen
$('.chosen-select'). chosen ({
    search_contains: true
});
$(function () {
    var searchBox ='.search-box';// Area to select items to narrow down
    var listItem ='.list_item';// Items to be narrowed down
    var hideClass ='is-hide';// Class name given when not being narrowed down$(function () {
        // When the refinement item is changed
        $(document) .on ('change','.search-box select', function () {
            search_filter ();
            $('.chosen-select'). trigger ("chosen: updated");// Add
        });
    });
    // Narrow the list
    function search_filter () {
        // Unhide
        // $(listItem) .removeClass (hideClass);
        $(listItem) .attr ('disabled', false);
        for (var i = 0;i<$('.search-box select'). length;i ++) {
            var name = $('.search-box select'). eq (i) .attr ('id');
            // Get the selected item
            var searchData = get_selected_input_items (name);
            // Skip if no item is selected or ALL is selected
            if (searchData.length === 0 || searchData [0] ==='') {
                continue;continue;
            }
            // Check each item in the list
            for (var j = 0;j<$(listItem) .length;j ++) {
                // Get the item set for the item
                var itemData = $(listItem) .eq (j) .data (name);
                // Check if it is the target of narrowing down
                if (searchData.indexOf (itemData) === -1) {
                    // $(listItem) .eq (j) .addClass (hideClass);
                    $(listItem) .eq (j) .attr ('disabled', true);
                }
            }
        }
    }
    // The value of the value attribute of the selected option
    function get_selected_input_items (name) {
        var searchData = [];
        // $('[name ='+ name +']: checked'). each (function () {
        $('select [name ='+ name +'] option: selected'). each (function () {
            searchData.push ($('# visitor_id option: selected'). val ());
        });
        return searchData;
    }
});
  • Answer # 1

    It is the same as when tested here.
    (After this, I moved the contents to stylesheet.js and checked it again)

    <! DOCTYPE html><html lang = "ja" xmlns: th = "http://www.thymeleaf.org"
        xmlns: layout = "http://www.ultraq.net.nz/thymeleaf/layout"><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><title>Document</title><!-Bootstrap CSS-><p><!-Font Awesome 5--><p><p><p></head><body>                                                                                 <i></i>Please select a person in charge                       <form action = "">                                                                                            <select id = "visitor_id">                                    <option value = "">Department selection</option>                                    <option value = "itsol">IT Solution Department</option>                                    <option value = "jigyou">Business Administration Department</option>                                    <option value = "eigyou">Sales Group</option>                                </select>                                                                                                <select name = "visitor_id">                                    <option value = "">Name selection</option>                                    <option data-visitor_id = "itsol">Yamada (Yamada)</option>                                    <option data-visitor_id = "itsol">Tanaka</option>                                    <option data-visitor_id = "jigyou">Sato</option>                                    <option data-visitor_id = "jigyou">Suzuki</option>                                    <option data-visitor_id = "eigyou">Nakata</​​option>                                </select>                                                                                                                                                        <select id = "exiter_id">                                    <option value = "">Department selection</option>                                    <option value = "itsol">IT Solution Department</option>                                    <option value = "jigyou">Business Administration Department</option>                                    <option value = "eigyou">Sales Group</option>                                </select>                                                                                                <select name = "exiter_id">                                    <option value = "">Name selection</option>                                    <option data-exiter_id = "itsol">Yamada (Yamada)</option>                                    <option data-exiter_id = "itsol">Tanaka</option>                                    <option data-exiter_id = "jigyou">Sato</option><option data-exiter_id = "jigyou">Suzuki</option>                                    <option data-exiter_id = "eigyou">Nakata</​​option>                                </select>                                                          
                                                              <button type = "button" data-toggle = "modal"
                                        data-target = "# tabModal">Completed
                                  </button>                            <!-Modal->                                                                                                                                                                                                       Person in charge confirmation screen                                               <button type = "button" data-dismiss = "modal"
                                                        aria-label = "Close">                                                <span aria-hidden = "true">&times;</span>                                            </button>                                                                                                                                    <p>Are you in charge of this?</p>                                              mail address:
                                                  <p id = "mail-mail"></p>                                              Person in charge:
                                                  <p id = "name-name"></p>                                                                                                                                       Cancel                                               <button type = "submit">OK</button>                                                                                                                                                                                  
                          </form>                                                      
          <!-Optional JavaScript-><!-JQuery first, then Popper.js, then Bootstrap JS-><script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script><p><script>// chosen$('.chosen-select'). chosen ({
        search_contains: true
    });
    $(function () {
        var searchBox ='.search-box';// Area to select items to narrow down
        var listItem ='.list_item';// Items to be narrowed down
        var hideClass ='is-hide';// Class name given when not being narrowed down
        $(function () {
            // When the refinement item is changed
            $(document) .on ('change','.search-box select', function () {
                search_filter (this);
                $('.chosen-select'). trigger ("chosen: updated");// Add
            });
        });
        // Narrow the list
        function search_filter (e) {
            // Unhide
            // $(listItem) .removeClass (hideClass);
            $(e, listItem) .attr ('disabled', false);
            for (var i = 0;i<$(e,'.search-box select'). length;i ++) {
                var name = $(e,'.search-box select'). eq (i) .attr ('id');
                // Get the selected item
                var searchData = get_selected_input_items (e, name);
                // Skip if no item is selected or ALL is selected
                if (searchData.length === 0 || searchData [0] ==='') {
                    continue;continue;
                }
                // Check each item in the list
                for (var j = 0;j<$('select [name = "'+ e.id +'"]' + listItem) .length;j ++) {
                    // Get the item set for the item
                    var itemData = $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .data (name);
                    // Check if it is the target of narrowing down
                    if (searchData.indexOf (itemData) === -1) {
                        // $(listItem) .eq (j) .addClass (hideClass);
                        $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .attr ('disabled', true);
                    } else {
                        $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .attr ('disabled', false);
                    }
                }
            }
        }
        // The value of the value attribute of the selected option
        function get_selected_input_items (e, name) {
            var searchData = [];
            // $('[name ='+ name +']: checked'). each (function () {
            $(e,'select [name ='+ name +'] option: selected'). each (function () {
                searchData.push ($(e,'# visitor_id option: selected'). val ());
            });
            return searchData;
        }
    });
      </script></body></html>

  • Answer # 2

    Questioner
    It is better to use name and Id separately.
    This time
    Id = "visitor_id1"
    Id = "employee_id1"
    Id = "visitor_id2"
    Id = "employee_id2"
    It will be a source of mistakes.
    (I didn't fix it this time)

    After all, I only specified the class, so it was unclear which employee should be filtered.
    Therefore, an argument is added to search_filter so that you can know which process to use.
    The basic processing itself is almost unchanged. I just added the "Which" designation.

    // chosen
    $('.chosen-select'). chosen ({
        search_contains: true
    });
    $(function () {
        var searchBox ='.search-box';// Area to select items to narrow down
        var listItem ='.list_item';// Items to be narrowed down
        var hideClass ='is-hide';// Class name given when not being narrowed down
        $(function () {
            // When the refinement item is changed
            $(document) .on ('change','.search-box select', function () {
                search_filter (this);
                $('.chosen-select'). trigger ("chosen: updated");// Add
            });
        });
        // Narrow the list
        function search_filter (e) {
            // Unhide
            // $(listItem) .removeClass (hideClass);
            $(e, listItem) .attr ('disabled', false);
            for (var i = 0;i<$(e,'.search-box select'). length;i ++) {
                var name = $(e,'.search-box select'). eq (i) .attr ('id');
                // Get the selected item
                var searchData = get_selected_input_items (e, name);
                // Skip if no item is selected or ALL is selected
                if (searchData.length === 0 || searchData [0] ==='') {
                    continue;continue;
                }
                // Check each item in the list
                for (var j = 0;j<$('select [name = "'+ e.id +'"]' + listItem) .length;j ++) {
                    // Get the item set for the item
                    var itemData = $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .data (name);
                    // Check if it is the target of narrowing down
                    if (searchData.indexOf (itemData) === -1) {
                        // $(listItem) .eq (j) .addClass (hideClass);
                        $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .attr ('disabled', true);
                    } else {
                        $('select [name = "'+ e.id +'"]' + listItem) .eq (j) .attr ('disabled', false);
                    }
                }
            }
        }
        // The value of the value attribute of the selected option
        function get_selected_input_items (e, name) {
            var searchData = [];
            // $('[name ='+ name +']: checked'). each (function () {
            $(e,'select [name ='+ name +'] option: selected'). each (function () {
                searchData.push ($(e,'# visitor_id option: selected'). val ());
            });
            return searchData;
        }
    });

Related articles