I use the select2 plugin to search for cities that are taken from the server by ajax, then through the plugin I put into the form on the page something like this

<select class="form-control from" id="from"></select>

in such a script I add values ​​to the form

 $(".from").select2({ language: 'ru', theme: 'bootstrap', placeholder: "выберите город", allowClear: true, ajax: { url: "script.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term to: 'searchCity' }; }, processResults: function (data) { return { results: data }; }, }, escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection }); function formatRepoSelection (repo) { return repo.lable || repo.text; } function formatRepo (repo) { if (repo.loading) return repo.text; var markup = "<option value='"+ repo.code +"'>"+repo.name+"</option>"; return markup; }

When searching for values, pop-up menus are filled in, but when I click on any item in the list, nothing happens, the form does not respond, what am I doing wrong?

upd: screen enter image description here

outliers cannot be selected

upd2: here is the server response

 [{"label":"\u041c\u043e\u0441\u043a\u0432\u0430, \u0420\u043e\u0441\u0441\u0438\u044f (MOW)","code":"MOW","name":"\u041c\u043e\u0441\u043a\u0432\u0430"},{"label":"\u041c\u043e\u0441\u0442\u0430\u0440, \u0411\u043e\u0441\u043d\u0438\u044f \u0438 \u0413\u0435\u0440\u0446\u0435\u0433\u043e\u0432\u0438\u043d\u0430 (OMO)","code":"OMO","name":"\u041c\u043e\u0441\u0442\u0430\u0440"},{"label":"\u041c\u043e\u0441\u044c\u043e\u0435\u043d, \u041d\u043e\u0440\u0432\u0435\u0433\u0438\u044f (MJF)","code":"MJF","name":"\u041c\u043e\u0441\u044c\u043e\u0435\u043d"},{"label":"\u041c\u043e\u0441\u0441\u043e\u0440\u043e, \u0420\u0438\u0443-\u0413\u0440\u0430\u043d\u0434\u0438-\u0434\u0443-\u041d\u043e\u0440\u0442\u0438, \u0411\u0440\u0430\u0437\u0438\u043b\u0438\u044f (MVF)","code":"MVF","name":"\u041c\u043e\u0441\u0441\u043e\u0440\u043e"},{"label":"\u041c\u043e\u0441\u043a\u0443\u0435\u0440\u0430, \u041a\u043e\u043b\u0443\u043c\u0431\u0438\u044f (MQR)","code":"MQR","name":"\u041c\u043e\u0441\u043a\u0443\u0435\u0440\u0430"}]
  • And the list does not open at all, or does it open and the options fail to choose? - Maqsood
  • A list opens, but values ​​are not selected - user193361
  • @user193361 Could you clarify, I don’t understand what it means to "not get out"? Clicking on the item in the drop-down list does not work and nothing happens (if so, have you tried the keyboard?)? Or is the element chosen, but the value of select does not change? Can you add a screenshot of the final select in expanded form? - Ivan Pshenitsyn
  • added screenshot - user193361
  • @ user193361 click on the elements and nothing happens, right? Even the list does not collapse? Are there any errors in the console? - Ivan Pshenitsyn

2 answers 2

I found the answer to my own question: I added the output id of each element in the mysql sample, and the drop-down menu worked as it should, but the question remains: what is it for? Why doesn't it roll without id?

     function formatRepoSelection (repo) { repo.selected = true; return repo.lable || repo.text; }
    • Please complete your answer with explanations of what works and how - Yuri