Question

我使用 Select2 v4.0.3 ，然后使用ajax填充元素。

$("#el").select2({        
    multiple: true
    maximumSelectionSize: 1,

    ajax: {
        url: url, 
        data: function (params) {
            return {
                name: params.term
            };
        },
        processResults: function (data) {                
            return {
                results: $.map(data.results, function(obj) {
                    return {id: obj.id, text: obj.name, key: obj.key};                        
                    }
                })
            };
        }
    }        
});

我想在选择结果之前重定向客户端。问题是我需要点击结果中的key属性。为了更好地理解我想要做的事情，我在这里粘贴一个在选择之后有效的片段。

$("#el").on("select2:select", function(e) { var selected = $(this).select2('data')[0]; location.href = base_url + '?key=' + selected.key; });

Answer 1

您可以使用event.params.args.data.id从点击的结果中获取关键属性。所以，你的代码可能会像：

$("#el").on("select2:select", function(e) {
  var selected = event.params.args.data.id;
  location.href = base_url + '?key=' + selected;
});

我略微修改了官方的Github存储库示例以表明我的观点。

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>

<body>
    <select class="js-data-example-ajax" style="width: 100%">
        <option value="3620194" selected="selected">select2/select2</option>
    </select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script>
        $(".js-data-example-ajax").select2({
            ajax: {
                url: "https://api.github.com/search/repositories",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    return {
                        results: $.map(data.items, function(ghrepo) {
                            return {
                                text: ghrepo.archive_url,
                                id: ghrepo.archive_url
                            }
                        })
                    }

                },
                cache: true
            },
            escapeMarkup: function(markup) {
                return markup;
            },
            minimumInputLength: 1
        }).on('select2:selecting', function(event, params) {
            event.preventDefault();
            repoId = event.params.args.data.id;
            console.log(repoId);
        });
    </script>
</body>

</html>

在选择项目Select2之前重定向

1 个答案: