使用 jQuery 显示/隐藏 select2

问题描述 投票：0回答：1

我发现显示 select2 选项来加载类别或产品有问题，我用每种方法进行了测试，但它不起作用。甚至 stackoverflow 中的选项。

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0</title>

    <link href="../assets/cdn/select2.min.css" rel="stylesheet" />
    <script src="../assets/cdn/jq.js"></script>
    <script src="../assets/cdn/select2.min.js"></script>

    <link href="../assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
    <style>
        .hidden {
            display: none;
        }
        
        .visible {
            display: block;
        }
    </style>
    <script>
        $(document).on('change', '#cat', function() {
            $('#catlist').removeClass('hidden').addClass('visible');
            $('#prolist').removeClass('visible').addClass('hidden');
        });

        $(document).on('change', '#pro', function() {
            $('#prolist').removeClass('hidden').addClass('visible');
            $('#catlist').removeClass('visible').addClass('hidden');
        });

        $(document).ready(function() {
            $('#catlist').select2();
            $('#prolist').select2();



            $.ajax({
                url: '../content/ajax/getcat.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, item) {
                        $('#catlist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                    $('#cat').click(); 
                }
            });

            $.ajax({
                url: '../content/ajax/getpro.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, item) {
                        $('#prolist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                    });
                }
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <div class="row p-4">
                    <label class="mb-3">Pro or Category</label>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" checked name="procat" type="radio" value="" id="cat" />
                            <label class="form-check-label" for="cat">category</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-check form-check-custom">
                            <input class="form-check-input" name="procat" type="radio" value="" id="pro" />
                            <label class="form-check-label" for="pro">products</label>
                        </div>
                    </div>
                </div>

                <select class="form-select mb-3 hidden" id="catlist" data-control="select2" data-close-on-select="false" data-placeholder="select cats" data-allow-clear="true" multiple="multiple">
                </select>

                <select class="form-select mb-3 hidden" id="prolist" data-control="select2" data-close-on-select="false" data-placeholder="select products" data-allow-clear="true" multiple="multiple ">
                </select>
            </div>
        </div>
    </div>

</body>

</html>

我通过使用人工智能和stackoverflow中的重复问题还没有得出结果。

jquery-select2
1个回答
0
投票

我赢了

<style>
    .hidden {
        display: none !important;
    }
    
    .visible {
        display: block !important;
    }
</style>
<script>
    $(document).ready(function() {

        function toggleContent() {
            if ($('#cat').is(':checked')) {
                $('#catlist').removeClass('hidden').addClass('visible');
                $('#prolist').removeClass('visible').addClass('hidden');
                $('#catlist').select2();
                $('#prolist').select2('destroy'); 
            } else if ($('#pro').is(':checked')) {
                $('#prolist').removeClass('hidden').addClass('visible');
                $('#catlist').removeClass('visible').addClass('hidden');
                $('#prolist').select2();
                $('#catlist').select2('destroy');
            }
        }


        $('input[name="procat"]').change(function() {
            toggleContent();
        });


        $.ajax({
            url: '../content/ajax/getcat.php',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#catlist').empty();
                $.each(data, function(index, item) {
                    $('#catlist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                });
                toggleContent(); 
            }
        });

        $.ajax({
            url: '../content/ajax/getpro.php',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#prolist').empty(); 
                $.each(data, function(index, item) {
                    $('#prolist').append('<option value="' + item.id + '">' + item.faname + '</option>');
                });
                toggleContent(); 
            }
        });

        toggleContent();
    });
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.