无法选择 select2 版本 4.0.3 ajax 方法上的选项
[英]Can't select the option on select2 version 4.0.3 ajax method
问题描述
I am using select2 version 4.0.3 autocomplete.
我正在使用 select2 版本 4.0.3 自动完成。 I'm used the ajax post method for load the JSON on select2.我使用 ajax post 方法在 select2 上加载 JSON。 It is shows the data on select option but i can't select that one option.它显示了有关选择选项的数据，但我无法选择该选项。 If anyone knows give me the solution please.如果有人知道请给我解决方案。 Thanking you谢谢你
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> </head> <body> <div class="container-fluid"> <div class="row"> <p> <select class="js-example-basic-single js-states form-control"></select> </p> </div> </div> </body> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script> $(function() { $('.js-example-basic-single').select2({ placeholder: "Select a state", minimumInputLength: 3, ajax: { url: 'url', type: "POST", quietMillis: 50, data: function(term) { console.log(term.term) return { mobile: term.term }; }, processResults: function(data, params) { //ajax response data var data = { "results": [{ "userID": 1, "mobile": "9500494896", "name": "Prabhu" }, { "userID": 16, "mobile": "9500494849", "name": "Prakash" }] }; console.log(data); //var data = {results: []}; return { results: data.results }; }, cache: true }, escapeMarkup: function(markup) { return markup; }, templateResult: formatRepo, templateSelection: formatRepoSelection }); }) //http://localhost:8080/vclean/admin/index.cfm?action=ajax.ordersearch function formatRepo(repo) { console.log(repo); if (repo.loading) return repo.text; var markup = "<div class='select2-result-repository clearfix'>" + "<div class='select2-result-repository__meta'>" + "<div class='select2-result-repository__title'>" + repo.name + "</div>"; if (repo.mobile) { markup += "<div class='select2-result-repository__description'>" + repo.mobile + "</div>"; } markup += "</div>"; return markup; } function formatRepoSelection(repo) { console.log(repo); return repo.mobile || repo.text; } </script> </html>
1 个解决方案
解决方案1
0 2019-11-06 20:35:31
I have faced the same problem and solved it.我遇到了同样的问题并解决了它。 Main problem was select2 doesn't get ajax.googleapis cdn.主要问题是 select2 没有得到 ajax.googleapis cdn。 So, before the jQuery code I have loaded the cdn and it works fine now.所以，在 jQuery 代码之前，我已经加载了 cdn，现在可以正常工作了。 Firstly, the code was首先，代码是
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
The problem is looked like the picture below问题如下图所示
Now after solving the problem the code looks like below
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
Now it is seen like below现在它看起来像下面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.