Очистка фильтра не обновляет список выбора Jquery - PullRequest
Новая
       5

Очистка фильтра не обновляет список выбора Jquery

0 голосов
/ 24 октября 2019

У меня есть следующий код: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Select List Actions - jQuery Plugin">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Lightweight-Multi-select-Combo-Box-Plugin-For-jQuery-SelectListActions/js/jquery.selectlistactions.js"></script>
    <script src="https://www.jqueryscript.net/demo/jQuery-Input-Clear-Button-Plugin-For-Bootstrap-Clear-Button/jquery-clear-button.js"></script>

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>
    <div class="col-md-12">
        <div class="subject-info-box-1">
            <label>Available Superheroes</label>
            filter <input type="text" name="excluded_filter" class="form-control" id="excluded_filter">
            <select multiple class="form-control" name="excluded[]" id="excluded">
                <option value="123">Superman</option>
                <option value="456">Batman</option>
                <option value="789">Spiderman</option>
                <option value="654">Captain America</option>
            </select>
        </div>
        <div class="subject-info-arrows text-center">
            <br /><br />
            <input type='button' id='btnAllRight' value='>>' class="btn btn-default" /><br />
            <input type='button' id='btnRight' value='>' class="btn btn-default" /><br />
            <input type='button' id='btnLeft' value='<' class="btn btn-default" /><br />
            <input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
        </div>

        <div class="subject-info-box-2">
            <label>Superheroes You Have Selected</label>
            filter2 <input type="text" class="form-control" name="included_filter" id="included_filter">


            <select multiple class="form-control" name="included[]" id="included">
                <option value="765">Nick Fury</option>
                <option value="698">The Hulk</option>
                <option value="856">Iron Man</option>
            </select>
        </div>

        <div class="clearfix"></div>
    </div>

    <script>
        $('#btnRight').click(function (e) {
            $('select').moveToListAndDelete('#excluded', '#included');
            e.preventDefault();
            $.sortSelect('#included');
        });

        $('#btnAllRight').click(function (e) {
            $('select').moveAllToListAndDelete('#excluded', '#included');
            e.preventDefault();
            $.sortSelect('#included');
        });

        $('#btnLeft').click(function (e) {
            $('select').moveToListAndDelete('#included', '#excluded');
            e.preventDefault();
            $.sortSelect('#excluded');
        });

        $('#btnAllLeft').click(function (e) {
            $('select').moveAllToListAndDelete('#included', '#excluded');
            e.preventDefault();
            $.sortSelect('#excluded');
        });

        $.sortSelect = function (selector) {
            $(selector).html($("option", $(selector)).sort(function (a, b) {
                var arel = parseInt($(a).attr('value'), 10) || 0;
                var brel = parseInt($(b).attr('value'), 10) || 0;
                return arel == brel ? 0 : arel < brel ? -1 : 1
            }));
        };

        $('#excluded_filter').keyup(function () {
            var valthis = $(this).val().toLowerCase();
            var num = 0;
            $('select#excluded>option').each(function () {
                var text = $(this).text().toLowerCase();
                if (text.indexOf(valthis) !== -1) { $(this).show(); $(this).prop('selected', false); }
                else { $(this).hide(); }
            });
        });

        $('#included_filter').keyup(function () {
            var valthis = $(this).val().toLowerCase();
            var num = 0;
            $('select#included>option').each(function () {
                var text = $(this).text().toLowerCase();
                if (text.indexOf(valthis) !== -1) { $(this).show(); $(this).prop('selected', false); }
                else { $(this).hide(); }
            });
        });



    /**
     * enabled jQuery Clear Button
     */
     $('#excluded_filter').jQueryClearButton();



    </script>
</body>

</html>

Когда вы вводите что-то в поле ввода, оно фильтрует список выбора и показывает крестик, чтобы очистить фильтр - проблема в том, что список не отображает зановосписок. Во-вторых, есть ли способ рефакторинга фильтрации, чтобы у меня была только одна функция, которая фильтрует поля выбора. то есть. Были написаны две аналогичные функции для фильтрации, но предназначенные для спецификационного идентификатора для выбора, поэтому хотелось бы провести рефакторинг, чтобы одна функция работала для обоих блоков.

Спасибо

...